重构之路：webpack区分生产环境和开发环境

开始

咱们如今的配置都是写在一个webpack.config.js文件夹里，可是实际上，咱们在开发环境和生产环境中使用的配置是不同的，好比生产环境中咱们须要包的体积不能很大，否则在线上响应会变慢。因此咱们须要将生产环境和开发环境分开来。

cross-env

在node里，咱们有一个process对象，它里面包括了node的一些信息，env和它的一个属性，可是并无process.env.NODE_ENV，这是咱们本身添加的一个用来区分环境的变量，咱们经过这个来区分生产开发环境。

可是不一样电脑上设置的方式是不同的，因此cross-env就来了，它能够跨平台设置环境和使用环境变量。

咱们须要在控制台执行：

yarn add cross-env -D
复制代码

而后咱们在package.json里配置：

"build": "cross-env NODE_ENV=production webpack", "dev": "cross-env NODE_ENV=development webpack-dev-server" 复制代码

咱们在webpack.config.js里添加：

const NODE_ENV=process.env.NODE_ENV; console.log("--------"+NODE_ENV+"-----------"); 复制代码

而后去控制台执行，当执行yarn run build时：

控制台打印出了咱们设置的production。

 

执行yarn run dev的时候：

打印出了devlopment，说明咱们已经设置完成了。

 

webpack-merge

设置了环境以后咱们须要将配置分开，咱们先在根目录下新建==webpack.config.dev.js==（开发环境），==webpack.config.prod.js==（生产环境），将本来的webpack.config.js修改为==webpack.config.common.js==（公共）。

分离开的环境须要和common里的代码合并使用，因此咱们就须要用到webapck-merge插件，咱们在控制台执行：

yarn add webpack-merge -D
复制代码

下载好后先去package.json里修改配置：

//--config是能够设置咱们执行哪一个webpack文件，默认是执行webpack.config.js,可是咱们如今修改文件名了，因此咱们要设置一下 "build": "cross-env NODE_ENV=production webpack --config webpack.config.prod.js", "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.dev.js" 复制代码

咱们将一些开发环境用到的东西移到==webpack.config.dev.js==里：

const path=require('path'); const webpack=require('webpack'); const merge=require('webpack-merge');//这里引入merge const common=require('./webpack.config.common.js');//这里引入公共代码 module.exports=merge(common,{//注意这里的写法 mode:'development', devtool:'cheap-module-eval-source-map', module:{ rules:[ ] }, devServer: { contentBase: path.join(__dirname, "dist"), compress: true,//开启gzip压缩 port: 8080, open:true, hot:true, overlay:true, }, plugins:[ new webpack.HotModuleReplacementPlugin(), ] }) 复制代码

生产环境的移到==webpack.config.prod.js==：

const merge=require('webpack-merge'); const webpack=require('webpack'); const common=require('./webpack.config.common.js'); const MiniCssExtractPlugin=require('mini-css-extract-plugin'); const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); const CleanWebpackPlugin = require('clean-webpack-plugin'); module.exports=merge(common,{ mode:'production', module:{ rules:[ ] }, plugins:[ new MiniCssExtractPlugin({//提取css filename:'css/main.css' }), new CleanWebpackPlugin('./dist'),//删除dist目录下的文件 new BundleAnalyzerPlugin({ analyzerPort: 8090 }), ] }) 复制代码

而后去==webpack.config.common.js==里将相关代码删除就好了。

这里还有个注意点，在使用MiniCssExtractPlugin.loader的时候是不支持热更新的，因此咱们须要根据环境来区分这个，咱们在==webpack.config.common.js==里修改一下：

//开发环境使用style-loader { loader:NODE_ENV==="production" ? MiniCssExtractPlugin.loader : "style-loader" }

 

转载： http://www.javashuo.com/article/p-roqoardd-gx.html