原先已经翻译过一篇关于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