1.定义：
开发环境：开发人员调试开发的一种环境: 方便调试，保持高效的开发
生产环境：发布上线的环境: 让程序在生产环境中正常有效的运行
开发环境的需求：
模块热更新 （本地开启服务，实时更新）
sourceMap (代码映射，方便打包调试)
接口代理 (配置proxyTable解决开发环境中的跨域问题)
代码规范检查 (代码规范检查工具)生产环境的需求：
提取公共代码
压缩混淆(压缩混淆代码，清除代码空格，注释等信息使其变得难以阅读)
文件压缩/base64编码(压缩代码，减少线上环境文件包的大小)
去除无用的代码开发环境和生产环境的共同需求：
入口
代码处理(loader处理)
解析配置
2.webpack配置文件
搭建好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');//引入webpackconst 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$/,//使用loaderuse: [MiniCssExtract.loader,'css-loader',{loader: "postcss-loader"},]//正则表达式匹配.less为后缀的文件//使用lodaer来处理}, {test: /\.less$/,use: [MiniCssExtract.loader,'css-loader',{loader: "postcss-loader"},'less-loader']},/* {test: /\.js$/,//不包括node_modulesexclude: /node_modules/,use: [{loader: "eslint-loader",options: {enforce: 'pre' //强制更改顺序，pre 前 post 后}}],},*/{test: /\.js$/, //普通的loader//不包括node_modulesexclude: /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');//引入webpackconst 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.htmlhot: 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:[//使用插件定义全局变量DEVnew 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"},
3.webpack区分开发环境和生产环境
在node中有一个对象process对象，它里面包括env和它的一些属性，NODE_ENV是我们自己加上去的自定义属性，用来区分环境变量，也就是通过这个变量来进行区别是开发环境还是生产环境；但是有个问题，不同电脑上设置的方式是不一样的，所以就出现了cross-env
cross-env：跨平台设置环境和使用环境变量
npm install cross-env
在webpack.base.conf.js文件中修改代码：
const NODE_ENV=process.env.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" // 开发环境
