十四：配置生产环境

1:根目录下新建一个 webpack.prod.conf.js 文件

2:先将 webpack.dev.conf.js 文件的内容，全部复制到该文件中

3:然后我们需要做以下几处修改：
（1）删除 devServer 配置项的代码

（2）出口配置 filename: 'js/[name].[hash].js' 改为 filename: 'js/[name].[chunkhash].js'， 开发环境设置为 hash 是因为这个和 webpack-dev-server 不兼容

（3）devtool 的配置改为 cheap-module-source-map

（4）删除 plugins 配置中的 new webpack.HotModuleReplacementPlugin(), 生产环境已经不需要热加载，不删除会报错

（5）修改 mode 配置为 production

（6）删除头部引入的关于开发服务的插件

（7）plugins 中，添加 new webpack.HashedModuleIdsPlugin() 实现持久化缓存

（8）增加js和css的压缩功能配置

const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); // 压缩 JS
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'); // 压缩 css

（9）打包配置的output中配置publicPath值为/，用绝对地址。

   output:{
        path:path.resolve(__dirname,'dist'),
        filename: 'js/[name].[chunkhash].js',
        chunkFilename: 'js/[name].[chunkhash].js',
        publicPath:"/"
    },

（10）删除引入 的eslint（用来识别 ECMAScript 并且按照规则给出报告的代码检测工具，使用它可以避免低级错误和统一代码的风格）

然后在 package.json 文件中增加打包脚本
"build":"webpack --config webpack.prod.conf.js"

然后执行 npm run build 项目根目录中是不是已经生成 dist 文件夹，其内就是打包的生产环境的文件了~

  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack --config webpack.dev.conf.js",
    "start": "webpack-dev-server --config webpack.dev.conf.js --color --progress",
    "test": "cross-env NODE_ENV=production webpack --config webpack.test.conf.js",
    "build": "cross-env NODE_ENV=production webpack --config webpack.prod.conf.js"
  },