Webpack配置区分开发环境和生产环境
- 2019 年 10 月 3 日
- 筆記
在项目开发的时候，我们通常会将程序分为开发环境和生产环境（或者叫线上环境），开发环境通常指的是我们正在开发的这个阶段所需要的一些环境配置，也就是方便我们开发人员调试开发的一种环境；生产环境通常指的是我们将程序开发完成经过测试之后无明显异常准备发布上线的环境，也可以理解为用户可以正常使用的就是生产环境；
当然开发环境和生产环境在配置方面的需求是不一样的，但是有共同点：
开发环境的需求：
模块热更新 （本地开启服务，实时更新）
sourceMap (方便打包调试)
接口代理 (配置proxyTable解决开发环境中的跨域问题)
代码规范检查 (代码规范检查工具)
生产环境的需求：
提取公共代码
压缩混淆(压缩混淆代码，清除代码空格，注释等信息使其变得难以阅读)
文件压缩/base64编码(压缩代码，减少线上环境文件包的大小)
去除无用的代码
开发环境和生产环境的共同需求：
同样的入口
同样的代码处理(loader处理)
同样的解析配置
在我们搭建好Vue-cli脚手架之后，我们的build文件夹会分别自动的生成webpack.base.conf.js、webpack.dev.conf.js、webpack.prod.conf.js三个webpack配置文件；
webpack.base.conf.js：webpack的开发环境和生产环境的共有配置(开发环境和生产环境都是需要执行的配置)
webpack.dev.conf.js：webpack的开发环境的特有配置(只在开发环境中执行，生产环境中不执行)
webpack.prod.conf.js：webpack的生产环境的特有配置(只在生产环境中执行，开发环境中不执行)
我们为什么要区分开发环境和生产环境呢？
因为一个项目的开发过程中肯定不会是一个版本开发完之后就立马上线，开发是必需，上线是目的；在开发的过程中会有各种各样的问题，比如开发环境中跨域、开发环境和生产环境因环境不同而产生的未知奇葩错误等等都是会时常发生的，我们区分环境的目的就是为了让开发人员在开发的过程中可以方便调试，保持高效的开发；让程序在生产环境中正常有效的运行；
webpack.base.conf.js配置
const path = require('path'); //清除build/dist文件夹文件 const CleanWebpackPlugin = require('clean-webpack-plugin'); //生成创建Html入口文件 const HtmlWebpackPlugin = require('html-webpack-plugin'); //将css提取到单独的文件中 const MiniCssExtract = require('mini-css-extract-plugin'); //css压缩 const OptimizeCss = require('optimize-css-assets-webpack-plugin'); //压缩js文件 const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); //引入webpack const webpack = require('webpack'); module.exports = { //webpack 入口文件 entry: './src/index.js', //webpack 输出文件配置 output: { //输出文件路径 path: path.resolve(__dirname, 'dist'), //输出文件名 filename: 'k-editor.[hash:8].js', }, //配置插件 plugins: [ //使用插件清除dist文件夹中的文件 new CleanWebpackPlugin({ path: './dist' }), //使用插件生成Html入口文件 new HtmlWebpackPlugin({ //模板文件路径 template: "./src/index.html", //模板文件名 filename: "index.html", minify: { removeAttributeQuotes: true, //删除双引号, collapseWhitespace: true, //压缩成一行， }, hash: true }), //提取css到style.css中 new MiniCssExtract({ filename: 'style.css' }), ], resolve: { // modules: [path.resolve('node_modules')],//只在当前目录下查找 alias: { //别名 'bootstrap': 'bootstrap/dist/css/bootstrap.css', }, // mainFields: ['style', 'main'],//优先寻找style， // mainFiles: [],//入口文件的名字,默认index.js // extensions: ['js', 'css', 'json', 'vue']//扩展名顺序 }, //loader加载器模块配置 module: { rules: [ { //正则表达式匹配.css为后缀的文件 test: /.css$/, //使用loader use: [ MiniCssExtract.loader, 'css-loader', { loader: "postcss-loader" }, ] //正则表达式匹配.less为后缀的文件 //使用lodaer来处理 }, { test: /.less$/, use: [ MiniCssExtract.loader, 'css-loader', { loader: "postcss-loader" }, 'less-loader' ] }, /* { test: /.js$/, //不包括node_modules exclude: /node_modules/, use: [{ loader: "eslint-loader", options: { enforce: 'pre' //强制更改顺序，pre 前 post 后 } }], },*/ { test: /.js$/, //普通的loader //不包括node_modules exclude: /node_modules/, use: [{ loader: "babel-loader" }] }, { test: /.html$/, use: ['html-withimg-loader'] }, { test: /.(gif|png|jpg)$/, use: [{ loader: "url-loader", options: { //图片小于10kb就是图片地址，大于正常打包成base64格式编码 limit: 10000, //输出路径 outputPath: 'img/' } }] } ] }, };
webpack.dev.conf.js：
//引入webpack-merge插件进行合并 const {merge} = require('webpack-merge'); //引入webpack.base.conf.js文件 const base = require('./webpack.base.conf'); //引入webpack const webpack = require('webpack'); //进行合并，将webpack.base.conf.js中的配置合并到这 module.exports = merge(base, { //模块参数 mode: 'development', devServer: { contentBase: './dist', //端口号 port: '8383', inline: true, historyApiFallback: true,//在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html hot: true//允许热加载 }, //启用source-map方便调试 devtool: 'source-map', plugins: [ //定义全局变量 new webpack.DefinePlugin({ //这里必须要解析成字符串进行判断，不然将会被识别为一个变量 DEV: JSON.stringify('dev') }) ] });
webpack.prod.conf.js:
const {merge} = require('webpack-merge'); const base = require('./webpack.base'); const path = require('path'); const OptimizeCss = require('optimize-css-assets-webpack-plugin'); const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); const webpack = require('webpack'); module.exports = merge(base, { mode: 'production', optimization: { minimizer: [ //压缩CSS代码 new OptimizeCss(), //压缩js代码 new UglifyJsPlugin({ //启用文件缓存 cache: true, //使用多线程并行运行提高构建速度 parallel: true, //使用 SourceMaps 将错误信息的位置映射到模块 sourceMap: true }) ] }, plugins:[ //使用插件定义全局变量DEV new webpack.DefinePlugin({ DEV:JSON.stringify('production') }) ] });
最后在配置一下package.json文件就可以了：
"scripts": { "test": "npm run test", "dev": "webpack-dev-server --config webpack.dev.js", "build": "webpack --config webpack.prod.js" },
如何区分开发环境和生产环境呢？
在node中，我们有一个对象process对象，它里面包括的一些信息，env和它的一些属性，当然NODE_ENV是我们自己加上去的自定义属性，用来区分环境变量，也就是通过这个变量来进行区别是开发环境还是生产环境；但是有个问题，不同电脑上设置的方式是不一样的，所以cross-env就来了，它可以跨平台设置环境和使用环境变量。
npm install cross-env
我们在webpack.base.conf.js文件中修改代码：
const NODE_ENV=process.env.NODE_ENV; console.log(NODE_ENV);
然后我们修改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来区分开发环境和生产环境，当我们用npm run dev运行的时候就是开发环境，当我们运行npm run build的时候就是构建生产环境打包；
对了，最后再多说一句，从今天开始，本文作者的个人微信公众号正式开通（公众号已接入第七代微软小冰AI机器人），后期文章微信公众号将同步更新，如果觉得文章对你有帮助，可以扫码关注一下：
