原先已经翻译过一篇关于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
时间： 2024-08-06 19:44:07