Webpack 的详细配置过程 (各版本略有出入,看报错信息)

技术教程 4年前 (2018) 亦森
41,580 0

 

1:webpack是基于模块化开发思想的产物,它可以将分为各种功能模块的代码打包成一个js文件,解决了作用域混乱问题 同时提高了各分支开发的效率

2:首先要安装Node.js ,从nodejs官网下载对应操作系统的安装包

3:安装完node 打开控制台或者 cmd 键入 node -v 会返回当前的版本 若没有显示则安装错误,根据安装教程冲洗安装。

4 : node 内置了一个包管理器 “npm” 键入 npm -v 同上

5:npm install -g webpack@3.6.0 --save 这句意思是“-g” 全局 npm install 安装 webpack 3.6.0的版本(版本不是必须,不带默认最新版,配置会有小差异) --save 代表运行时依赖 在package.json中通过 dependencies记录 --save-dev  代表开发时依赖 devDependencies 中记录的是项目在开发过程中需要使用的一些文件,在项目最终运行时是不需要的  也就是说我们开发完成后,最终的项目中是不需要这些文件的;

6:安装完webpack全局环境后, 键入 npm init 根据提示填写 也可回车跳过 生成一个package.json 文件 在这个文件里记录着配置信息,可以作为参考

7:安装一个本地的webpack 就是不带-g ,在项目目录新建一个webpack.config.js作为本地webpack的配置文件

1,引入path const path = require(‘path’)

2,module.exports={}`

3,上边对象中声明 entry和output 出口需要用绝对路径 用到1 引入的path对象下边的reslove(__dirname,‘dist’)

  1. 新版本的还要在同级声明mode:‘development’ 开发模式打包
  2. Package.json中script中定义映射打包命令 dev :”webpack --mode develpoment” , build:”webpack --mode production” 就可以打包js文件了
  3. npm run “关键字” 执行命令 就是映射5中定义的关键命令
  4. 相应的文件需要相应的loader 例如 js中 require(*.css) ,就需要npm install css-loader,npm install style-loader ,并在webpack。Config。Js 中指定使用loader;

这里可以把loader视为webpack的补丁或者扩展 第一步执行安装命令 第二步在webpack.config.js中使用它 :module.exports对象中添加属性 module:{}>rules:{}>test:‘例 /\.css$/i’,use:[]>{loader:’css-loader’},{loader:’style-loader’};是从后往前使用的,顺序不对会报错,注意。

Test :“在哪些文件使用这个loader,写正则 例 /\.css$/i 代表以.css结尾的文件使用此loader加载编译” > 代表此对象中写后边的属性

附:引入vue框架 先安装VUE npm install vue (可以@2.4.1指定版本 不指定就默认最新版),webpack.Config 中module.exports对象中添加属性reslove 值为对象中添加alias属性 值为对象中添加属性 “vue$” (代表vue结尾的文件 或 引用 ) 值为 “vue/dist/vue.esm.js” 代表开发环境 在dist中有较多不同的vue运行环境

Webpack 的详细配置过程 (各版本略有出入,看报错信息)
版权声明:亦森 发表于 2018-04-02 10:21:31。
转载请注明:Webpack 的详细配置过程 (各版本略有出入,看报错信息) | 亦森博客

暂无评论

暂无评论...