webpack用法总结

Posted 2020-08-21 worldly1013

　　原先已经翻译过一篇关于webpack的文章了，那是刚开始学习webpack时参考阮一峰的教程，顺便就把它的英文文章给翻译了过来。Webpack是一个强大的模块化打包和构建工具，不仅能对JS进行打包，而且还能通过加载器对CSS 、image 、font 进行打包，引用时直接当作模块来引用，最后统一打包成一个bundle.js文件来输出；同时Webpack还支持插件功能，其各种插件大大丰富了webpack的功能，如最常见的html-webpack-plugin插件，能由写好的模版在编译后直接生成所需要的html页面，方便维护、扩展和部署上线。此外，Webpack还能对css进行预处理, 如使用postcss－loader中的autoprefixer 、pxtorem等功能实现CSS免前缀 ，px自动转换为rem；使用less-loader 、scss-loader直接引用less、scss文件；使用css-loader中的css modules实现CSS样式的局部与全局编写，并用hash值来进行样式命名，让你在编写代码时再也不用为命名而发愁了。。。总之，Webpack给人以无所不能的感觉，但是上手麻烦，配置项看起来让新手一脸懵逼，远不如gulp小而灵巧，应该也算是它的一个弊端吧！

　　因在Webpack里踩过的坑实在太多了，所以便对自己现阶段所了解的用法作一个总结，后续学习再逐渐完善上去。

一、配置文件

　　配置文件中主要分为入口文件处理、输出处理、加载器、插件、webpack开发服务器这几个部分，因webpack开发服务器这部分内容较多，放到后面详细介绍。

  1 var webpack = require(\'webpack\');
  2 var path = require(\'path\');
  3 
  4 // _dirname 为当前模块文件所在目录的绝对路径
  5 // path.resolve 相当于 _dirname + build 进行地址拼接
  6 var buildPath = path.resolve(__dirname,"build");
  7 var nodemodulesPath = path.resolve(__dirname,\'node_modules\');
  8 
  9 var autoprefixer = require(\'autoprefixer\');
 10 var px2rem = require(\'postcss-pxtorem\');
 11 var px2remOpts = {
 12     rootValue: 100,
 13     propWhiteList: [],
 14 };
 15 
 16 var HtmlWebpackPlugin = require(\'html-webpack-plugin\');
 17 
 18 var config = {
 19 
 20     //入口文件配置
 21     entry:｛
 22         // 入口文件路径
 23         index:path.resolve(__dirname,\'src/main.js\'),
 24 
 25         // 为了优化，切割代码，提取第三方库
 26         vendor: [
 27           \'react\',
 28           \'react-dom\',
 29           \'react-router\'
 30         ]
 31         
 32     ｝,
 33 
 34     resolve:{
 35         // extentions: 配置文件的扩展名，当在import文件时，不用在需要添加扩展名
 36         // 默认的扩展名为[“”, “.webpack.js”, “.web.js”, “.js”]
 37         // 空字符串在此是为了resolve一些在import文件时不带文件扩展名的表达式
 38         extentions:["","jsx","json","js","web.js"],
 39 
 40         // 路径别名, 懒癌福音
 41         alias:{
 42           app:path.resolve(__dirname,\'src/js\'),
 43           // 以前你可能这样引用 import { Nav } from \'../../components\'
 44           // 现在你可以这样引用 import { Nav } from \'app/components\'
 45 
 46           style:path.resolve(__dirname,\'src/styles\')
 47           // 以前你可能这样引用 @import "../../../styles/mixins.scss"
 48           // 现在你可以这样引用 @import "style/mixins.scss"
 49         }          
 50     },
 51 
 52     //文件导出的配置
 53     output:{
 54         path:buildPath,               // 输出路径
 55         filename:"app.js"             // 输出文件名 
 56     },
 57 
 58     // 生成source-map , 便于开发者debug 
 59     devtool: \'eval-source-map\',
 60 
 61     module: {
 62         //loaders加载器
 63         loaders: [
 64             // babel ES6解析
 65             {
 66                 test: /\\.(js|jsx)$/,                 // 用正则来验证所要测试的文件后缀名
 67                 include: [path.resolve(__dirname, "src/app")],  // 所要处理文件的路径
 68                 exclude: [nodemodulesPath],             // 排除不处理的目录
 69                 // 加载器的名字，不同加载器之间用！连接，？为使用该加载器后附带的功能 , 加载器的执行为从后往前执行
 70                 loader: \'babel\' 
 71             },
 72                                      
 73             // image解析
 74             {
 75                 test:/\\.(png|jpg)$/,
 76                 loader:\'url-loader?limit=50000\'
 77             },
 78             // CSS文件解析
 79             {
 80                 test:   /\\.css$/,
 81                 loader: "style-loader!css-loader!postcss-loader"
 82             }
 83 
 84         ]
 85     },
 86 
 87     // postcss平台
 88     // 此处配置了免前缀功能和px转换为rem功能
 89     postcss: [ autoprefixer({ browsers: [\'last 2 versions\'] }),px2rem(px2remOpts) ],
 90 
 91     plugins: [
 92 
 93         //   优化使用模块
 94         new webpack.optimize.OccurrenceOrderPlugin(), 
 95         // webapck 会给编译好的代码片段一个id用来区分
 96         // 而这个插件会让webpack在id分配上优化并保持一致性。
 97         // 具体是的优化是：webpack就能够比对id的使用频率和分布来得出最短的id分配给使用频率高的模块
 98 
 99 
100         //   压缩代码
101         new webpack.optimize.UglifyJsPlugin({
102               compressor: {
103                 warnings: false
104               }
105         }), 
106 
107 
108         //  去除debug提示信息
109         // 很多库的内部，有process.NODE_ENV的判断语句，
110         // 改为production。最直观的就是没有所有的debug相关的东西，体积会减少很多
111         new webpack.DefinePlugin({
112               \'process.env\': {
113                 \'NODE_ENV\': JSON.stringify(\'production\')
114               }
115         })
116 
117 
118         // \'vendor\' 就是把依赖库(比如react react-router, redux)全部打包到 vendor.js中
119         // \'vendor.js\' 就是把自己写的相关js打包到bundle.js中
120         // 一般依赖库放到前面，所以vendor放第一个
121         new webpack.optimize.CommonsChunkPlugin(\'vendor\', \'vendor.js\' ),
122 
123 
124         new HtmlWebpackPlugin({
125               template:\'src/index.html\',
126               // html模板的路径
127               
128               title: \'产品模式\',
129               // html模版的标题
130               
131               filename:\'index.html\',
132               // 文件名以及文件将要存放的位置
133 
134               favicon:\'./src/favicon.ico\',
135               // favicon路径
136               
137               inject:\'body\',
138               // js插入的位置，true/\'head\'  false/\'body\'
139 
140               chunks: [\'vendor\', \'index\' ],
141               // 指定引入的chunk，根据entry的key配置，不配置就会引入所有页面的资源
142 
143               hash:true,
144               // 这样每次客户端页面就会根据这个hash来判断页面是否有必要刷新
145               // 在项目后续过程中，经常需要做些改动更新什么的，一但有改动，客户端页面就会自动更新！
146 
147               minify:{
148               // 压缩HTML文件
149                 removeComments:true,
150                 // 移除HTML中的注释
151 
152                 collapseWhitespace:true
153                 // 删除空白符与换行符
154               }
155         })
156     ]
157 }
158 
159 module.exports = config;

　　上面代码中详细介绍了Webpack的用法和在实际项目开发过程中的常用的加载器和插件

二、启动运行

　　Webpack该如何启动运行编译了，主要有以下几种方法：

　　1. 启动编译　

webpack    //  默认执行 webpack.config.js文件
webpack --config webpack-pro-config.js       //执行另一份配置文件 
webpack --display-error-details              //显示异常信息 
webpack --watch                             //监听变动并自动打包 
webpack -p                                  //压缩混淆脚本，这个非常非常重要！ 
webpack -d                                  //生成map映射文件，告知哪些模块被最终打包到哪里了

　　2.快捷执行

　　当我们想执行webpack的执行命令时，我们就得在命令行中输入很长一遛的命令，自己操作起来很不方便，同时也不便于后续人员的维护, 我们可以把执行命令写在package.json文件中的scripts键中，这样我们每次执行时只需敲自定义的命令即可

"scripts": {
    "start": "webpack --watch",      // npm start  
    "dev": "webpack-dev-server --host 0.0.0.0",    // npm run dev
    "pro": "webpack --config webpack-pro-config.js --progress --colors"   // npm run pro
  }

  

webpack各加载器和插件用法详细介绍：

1.  上次我翻译的webpack-demo