以前自己写一小项目时，webpack的配置基本就是一套配置，没有考虑生产环境和开发环境的区分，最近在做一个复杂的商城项目接触到了webpack的高级配置，经过两天的研究，写出了一份目前来说比叫满意的配置，在这里分享一下。
如何区分开发环境和生产环境？
众所周知，webpack时基于node.js平台运行的，要区分开发环境和生产环境还要存，node入手。我们启动webpack时，都需要输入一些命令，npm run 、yarn start之类的，所以我们就从命令行入手，告诉webpack，当前是什么环境。
package.json
{ "name": "webpac-demo", "version": "1.0.0", "description": "webpack练习", "main": "index.js", "scripts": { //配置开发环境参数。注意：真实开发中 package.json 文件中不能有注释 "dev": "webpack --env=development", //配置生产环境参数 "dist": "webpack --env=production", "start": "webpack-dev-server --env=development" }, "dependencies": { "font-awesome": "^4.7.0", "react": "^16.2.0", "react-dom": "^16.2.0" }, "devDependencies":{ ... }} 这样配置，当我们在命令行输入 npm run dev 和 npm run dist 时，就会附带一些参数到命令行中，有了参数，我们该如何拿到呢？那就要用到 node 的一个命令行参数解析引擎了。
minimist
minimist轻量级的命令行参数解析引擎
// test.jsvar args = require('minimist')(process.argv.slice(2));console.log(args.hello);$ node test.js --env=production// production$ node test.js --env=development// development$ node test.js --env// true 注意：不是空字符串而是true minimist会把参数解析成一个JSON对象：{key:value}，有了这个JSON对象，我们就可以知道，当前的命令是要执行开发打包，还是生产打包了。
// webpack.config.jsconst webpack = require('webpack');//当前项目的绝对路劲const path = require('path');// 命令行参数解析引擎const argv = require('minimist')(process.argv.slice(2));let env = null;switch (argv.env) { case 'production': //生产环境配置文件名 env = 'webpack.config.prod'; break; default: //开发环境配置文件名 env = 'webpack.config.dev';}console.log(`当前是 ${argv.env} 打包`);// 这时候，我们就可以加载相应的wabpack配置了。module.exports = require( path.resolve( '加载的配置文件路劲'，env ) ); webpack开发环境配置和生产环境配置
开发环境配置
在开发环境下，我们首先考虑的是方便开发，方便代码调试，不需要考虑代码合并和css样式分离这些。
这里主要说三个 ：1.css模块化；2.模块热替换功能；3.source-map（代码映射）
// 开发环境打包配置const path = require('path');const webpack = require('webpack');const base = require('./webpack.config.base')const dfPath = require('./path')// webpack配置合并工具const merge =require('webpack-merge')const RS = (...arg)=>path.resolve( __dirname , ...arg )// 合并方式配置let strategyMerge = merge.strategy({ entry: 'prepend'});let config = { entry: { app: path.resolve(dfPath.root,'src/app.js') }, output: { path: dfPath.dist, filename: '[name].bundle.js', publicPath: '/', chunkFilename: '[name].sepChunk.js' }, module:{ rules: [ { test: //.js$/, use:['babel-loader'], exclude: [ dfPath.node_modules ] }, { test://.css$/, use:[ 'style-loader', { loader:'css-loader', options:{ // css模块化，方便多人开发 module:true, // 定义模块化css后的类名（默认为hash值，可读性差）path:路劲； name：文件名； local：本地定义的className localIdentName: '[path][name]__[local]--[hash:base64:5]' }, } ], // 排除的文件，遇到这些文件不会用当前 loader 处理，也就不会模块化 exclude:[ RS('./src/common'), RS('node_modules') ] }, { test://.css$/, use:['style-loader','css-loader'], include:[ RS('./src/common'), RS('node_modules') ] }, { test: //.(png|jpg|jpeg|gif)$/, use: ['url-loader?limit=8192'], } ] }, plugins:[ // 模块热替换功能 new webpack.HotModuleReplacementPlugin() ], // 代码映射，方便报错时，找到对应的源代码 devtool: 'cheap-module-eval-source-map', devServer:{ // 服务器打包后，输出的资源路劲 publicPath:'/', open:true }};// 导出合并后的webpack配置module.exports = strategyMerge( base , config ); 生产环境配置
相比开发环境，生产环境打包是要最后发布到服务器部署的代码，我们需要尽量保持代码简洁，加载性能最优，不需要调试辅助工具。
我们从这几个方面优化 ：1.公共模块拆分，单独打包；2. css文件分离，单独打包输出；3.代码压缩；
// 生产环境配置const webpack = require('webpack');const base = require('./webpack.config.base')const path = require('path');const dfPath = require('./path');const merge = require('webpack-merge');// 压缩工具const ClosureCompilerPlugin = require('webpack-closure-compiler');// css单独打包插件const extractTextWebpackPlugin = require('extract-text-webpack-plugin');const extractCSS = new extractTextWebpackPlugin('assets/css/[name]_[contenthash:6].css');// weback合并配置let strategyMerge = merge.strategy({ entry: 'replace', output: 'replace', module:{ rules: 'replace' }});let config ={ entry: { // 公共模块拆分，这些代码会单独打包，一般我们会把引用的框架文件拆分出来，方便浏览器缓存，节省资源。 vender:['react'], app: path.resolve(dfPath.root,'src/app.js') }, output: { path: dfPath.dist, filename: 'assets/js/[name]_[chunkhash].bundle.js', publicPath: '/', chunkFilename: 'assets/js/[name].sepChunk.js', hashDigestLength: 6 }, module:{ rules: [ { test: //.js$/, use:['babel-loader'], exclude: [ dfPath.node_modules ] }, /* 开启 css单独打包 和 css模块化的配置 */ { test: //.css$/, use: extractCSS.extract({ use: [ { loader: 'css-loader', options:{ modules: true } } ] }) }, { test: //.(png|jpg|jpeg|gif)$/, use: [ { loader: 'url-loader', options:{ limit:8192, name: '[name]_[hash].[ext]', outputPath: 'assets/img/' } } ], }, { test: //.(mp4|ogg|svg|ico)$/, use: [ { loader: 'file-loader', options:{ name: '[name]_[hash].[ext]', outputPath: 'assets/media/' } } ] }, { test: //.(woff|woff2)(/?v=/d+/./d+/./d+)?$/, use: [ { loader: 'url-loader', options:{ limit:10000, name: '[name]_[hash].[ext]', outputPath: 'assets/font/', mimetype: 'application/font-woff' } } ] }, { test: //.ttf(/?v=/d+/./d+/./d+)?$/, use: [ { loader: 'url-loader', options:{ limit:10000, name: '[name]_[hash].[ext]', outputPath: 'assets/font/', mimetype: 'application/octet-stream' } } ] }, { test: //.eot(/?v=/d+/./d+/./d+)?$/, use: [ { loader: 'file-loader', options:{ name: '[name]_[hash].[ext]', outputPath: 'assets/font/', } } ] }, { test: //.svg(/?v=/d+/./d+/./d+)?$/, use: [ { loader: 'url-loader', options:{ limit:10000, name: '[name]_[hash].[ext]', outputPath: 'assets/font/', mimetype: 'image/svg+xml' } } ] }, ] }, plugins:[ extractCSS, // 设置 process.env（生产环境） 环境变量的快捷方式。 new webpack.EnvironmentPlugin({ NODE_ENV: 'production' }) ,new ClosureCompilerPlugin() ], devtool: 'source-map'};module.exports = strategyMerge(base,config); 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持VeVb武林网。
注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。
