前情提要

上一篇文章介绍了目前前端比较流行的各种编辑器，以及各种流行的打包方式，最后给了一个Gulp的例子，这个例子还是14年的时候写的，还有一些可以优化的空间，就不讨论了，这篇文章主要讲目前火热的打包构建方式--Webpack的使用方式。

主菜--没有开胃汤

其实Webpack的入门指导文章非常多，配置方式也各有各样，这里我推荐题叶大神的入门级指南--Webpack 入门指迷，如果不知道Webpack是什么或者不是很清楚各项配置含义的开发者，可以看此文章扫扫盲。毕竟我这篇文章并不是特别基础。

一、base.js

1. var path = require('path') 
2. var baseConfig = { 
3.     resolve: { 
4.         extensions: ['', '.js'], 
5.         fallback: [path.join(__dirname, '../node_modules')], 
6.         alias: { 
7.             'src': path.resolve(__dirname, '../src'), 
8.             'assets': path.resolve(__dirname, '../src/assets'), 
9.             'components': path.resolve(__dirname, '../src/components') 
10.         } 
11.     }, 
12.     module: { 
13.         loaders: [{ 
14.             test: /\.js$/, 
15.             loader: 'babel', 
16.             exclude: /node_modules/ 
17.         }, { 
18.             test: /\.(png|jpe?g|gif|svg|woff2?|eot|ttf|otf)(\?.*)?$/, 
19.             loader: 'url?limit=8192&context=client&name=[path][name].[hash:7].[ext]' 
20.         }, 
21.         { 
22.             test: /\.css$/, 
23.             loader: 'style!css!autoprefixer', 
24.         }, 
25.         { 
26.             test: /\.scss$/, 
27.             loader: 'style!css!autoprefixer!sass' 
28.         }] 
29.     } 
30. }; 
31.  
32. module.exports = baseConfig; 

解读下这个基本配置：

1、resolve 解析模块依赖的时候，受影响的配置项。

extensions 决定了哪些文件后缀在引用的时候可以省略点，Webpack帮助你补全名称。

fallback 当webpack在 root(默认当前文件夹，配置时要绝对路径) 和 modulesDirectories(默认当前文件夹，相对路径)配置下面找不到相关modules，去哪个文件夹下找modules

alias 这个大家应该比较熟悉，requirejs之类的都有，就是别名，帮助你快速指向文件路径，少写不少代码，而且不用关心层级关系，需要注意的是：在scss之类的css预编译中引用要加上~，以便于让loader识别是别名引用路径。

2、module 解析不同文件使用哪些loader，这个比较简单，很多文章都有，就不多说了，注意的是，这里的scss可以换成你自己的预编译器，例如：sass、less、stylus等，或者直接用postcss都行，当然还可以用一种通用方法，后面补上。

二、开发环境配置--config

1. var webpack = require('webpack'); 
2. var path = require('path') 
3. var merge = require('webpack-merge') 
4. var baseConfig = require('./webpack.base') 
5. var getEntries = require('./getEntries') 
6.  
7. var hotMiddlewareScript = 'webpack-hot-middleware/client?reload=true'; 
8.  
9. var assetsInsert = require('./assetsInsert') 
10.  
11. module.exports = merge(baseConfig, { 
12.   entry: getEntries(hotMiddlewareScript), 
13.   devtool: '#eval-source-map', 
14.   output: { 
15.     filename: './[name].[hash].js', 
16.     path: path.resolve('./dist'), 
17.     publicPath:'./dist' 
18.   }, 
19.   plugins: [ 
20.     new webpack.DefinePlugin({ 
21.       'process.env': { 
22.         NODE_ENV: '"development"' 
23.       } 
24.     }), 
25.     new webpack.optimize.OccurenceOrderPlugin(), 
26.     new webpack.HotModuleReplacementPlugin(), 
27.     new webpack.NoErrorsPlugin(), 
28.     new assetsInsert() 
29.   ] 
30. }) 

说说这个配置中的一些难点：

1、getEntries 是用来配置入口文件，一般很多人是自己手写，或者SPA页面，只有一个入口， 很容易就写出来，但是公司中，很多情况，是需要多入口，也就是多路由的Url，这个时候入口的配置就比较麻烦，我这里是放单独一个文件里面配置，我们公司是靠规定来执行，也就是一个文件夹所有的main.js都认为是入口文件，其他都忽略。

1. function getEntry(hotMiddlewareScript) { 
2.     var pattern = paths.dev.js + 'project/**/main.js'; 
3.     var array = glob.sync(pattern); 
4.     var newObj = {}; 
5.  
6.     array.map(function(el){ 
7.         var reg = new RegExp('project/(.*)/main.js','g'); 
8.         reg.test(el); 
9.         if (hotMiddlewareScript) { 
10.             newObj[RegExp.$1] = [el, hotMiddlewareScript]; 
11.         } else { 
12.             newObj[RegExp.$1] = el; 
13.         } 
14.     }); 
15.     return newObj; 
16. } 

2、assetsInsert 是用来做模板替换的，一个小插件把template里面的值替换成打包后的css或者js。

三、打包环境配置--production

1. var webpack = require('webpack'); 
2. var path = require('path') 
3. var merge = require('webpack-merge') 
4. var baseConfig = require('./webpack.base') 
5. var getEntries = require('./getEntries') 
6. var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
7. var assetsInsert = require('./assetsInsert') 
8.  
9. var productionConf = merge(baseConfig, { 
10.     entry: getEntries(), 
11.     output: { 
12.         filename: './[name].[hash].js', 
13.         path: path.resolve('./public/dist'), 
14.         publicPath: './' 
15.     }, 
16.     plugins: [ 
17.         new webpack.DefinePlugin({ 
18.             'process.env': { 
19.                 NODE_ENV: '"production"' 
20.             } 
21.         }), 
22.         new ExtractTextPlugin('./[name].[hash].css', { 
23.             allChunks: true 
24.         }), 
25.         new webpack.optimize.UglifyJsPlugin({ 
26.             compress: { 
27.                 warnings: false 
28.             } 
29.         }), 
30.         new webpack.optimize.OccurenceOrderPlugin(), 
31.         new assetsInsert() 
32.     ] 
33. }) 
34.  
35. productionConf.module.loaders = [ 
36.              { 
37.                 test: /\.js$/, 
38.                 loader: 'babel', 
39.                 exclude: /node_modules/ 
40.             }, { 
41.                 test: /\.(png|jpe?g|gif|svg|woff2?|eot|ttf|otf)(\?.*)?$/, 
42.                 loader: 'url?limit=8192&context=client&name=[path][name].[hash:7].[ext]' 
43.             }, 
44.             { 
45.                 test: /\.css$/, 
46.                 loader: ExtractTextPlugin.extract('style', 'css'), 
47.             }, 
48.             { 
49.                 test: /\.scss$/, 
50.                 loader: ExtractTextPlugin.extract('style', 'css!sass') 
51.             }] 
52.  
53. module.exports = productionConf 

基本跟开发的差不多，差别在于：

1、使用ExtractTextPlugin 来打包css，所以要干掉原来base的loaders，重新写了一个，在最下面。

2、UglifyJsPlugin 给js压缩代码。其他没有什么好解释的了，一样的。

四、构建命令

1. require('shelljs/global') 
2. env.NODE_ENV = 'production' 
3. var ora = require('ora') 
4. var webpack = require('webpack') 
5. var webpackConfig = require('./webpack.production.config') 
6.  
7. var spinner = ora('building for production...') 
8. spinner.start() 
9.  
10. var staticPath = __dirname + '/../public/dist/' 
11. rm('-rf', staticPath) 
12. mkdir('-p', staticPath) 
13.  
14. webpack(webpackConfig, function (err, stats) { 
15.   spinner.stop() 
16.   if (err) throw err 
17.   process.stdout.write(stats.toString({ 
18.     colors: true, 
19.     modules: false, 
20.     children: false, 
21.     chunks: false, 
22.     chunkModules: false 
23.   }) + '\n') 
24. }) 

写一个build.js，然后在package.json里面添加 script 参数

1. "build": "node build.js"//这里记得写自己build.js路径 

甜点(马卡龙)--有点腻

上面的配置是可以更改的，例如你在loaders 里面加上

1. { 
2.   test: /\.vue$/, 
3.   loader: 'vue' 
4. } 

就可以变成支持.vue文件的vuejs打包构建，同理，修改下支持jsx，和添加一些reactjs的module，就可以用来跑Reactjs的东西。

还有可以随意更改Css预编译器的类型，用你自己喜欢就行，或者跟我们前面提到的方法，把所有类型都配置上，

1. var path = require('path') 
2. var config = require('../config') 
3. var ExtractTextPlugin = require('extract-text-webpack-plugin') 
4.  
5. exports.assetsPath = function (_path) { 
6.   return path.posix.join(config.build.assetsSubDirectory, _path) 
7. } 
8.  
9. exports.cssLoaders = function (options) { 
10.   options = options || {} 
11.   // generate loader string to be used with extract text plugin 
12.   function generateLoaders (loaders) { 
13.     var sourceLoader = loaders.map(function (loader) { 
14.       var extraParamChar 
15.       if (/\?/.test(loader)) { 
16.         loader = loader.replace(/\?/, '-loader?') 
17.         extraParamChar = '&' 
18.       } else { 
19.         loader = loader + '-loader' 
20.         extraParamChar = '?' 
21.       } 
22.       return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '') 
23.     }).join('!') 
24.  
25.     if (options.extract) { 
26.       return ExtractTextPlugin.extract('vue-style-loader', sourceLoader) 
27.     } else { 
28.       return ['vue-style-loader', sourceLoader].join('!') 
29.     } 
30.   } 
31.  
32.   // http://vuejs.github.io/vue-loader/configurations/extract-css.html 
33.   return { 
34.     css: generateLoaders(['css']), 
35.     postcss: generateLoaders(['css']), 
36.     less: generateLoaders(['css', 'less']), 
37.     sass: generateLoaders(['css', 'sass?indentedSyntax']), 
38.     scss: generateLoaders(['css', 'sass']), 
39.     stylus: generateLoaders(['css', 'stylus']), 
40.     styl: generateLoaders(['css', 'stylus']) 
41.   } 
42. } 
43.  
44. // Generate loaders for standalone style files (outside of .vue) 
45. exports.styleLoaders = function (options) { 
46.   var output = [] 
47.   var loaders = exports.cssLoaders(options) 
48.   for (var extension in loaders) { 
49.     var loader = loaders[extension] 
50.     output.push({ 
51.       test: new RegExp('\\.' + extension + '$'), 
52.       loader: loader 
53.     }) 
54.   } 
55.   return output 
56. } 

这就是把所有的css预编译的都加到配置里面了。

总结下--买单啦

Webpack多种多样，就算一个loaders都有好几种不同的配置，让人很是头疼，最关键的是很多插件自己的文档也不清不楚，弄得大家都很迷茫，我的经验就是多试多测，自己多写一写，看命令行打印的错误，去找原因，不要一看到报错就慌了，很多新手最容易犯错就是一看到报错就怀疑人生了，一定要看报错记录，一般都有提示，按照提示去解决相应问题就好啦。

作者：乖小鬼YQ

来源：51CTO