13、webpack构建--开发生产构建配置文件分离

红太狼 2022-01-27 15:21 155阅读 0赞

**1）配置的逻辑分离**

由于开发环境和生产环境对于构建的结果差异，如生产需要热加载、source-map和localhost server；而生产环境则需要更小bundle、更轻量的source map、更优化的资源以及改善加载时间。由于遵循逻辑分离，建议不同环境使用不同的配置文件。

但是共同的代码没必要在不同的配置里重复去书写，这里遵循不重复原则，编写一个通用配置，通过插件webpack-merge去合并到一起。

**2）安装webpack-merge**

npm install webpack-merge --save-dev

**3）工程目录结构如下**

**4）通用配置文件webpack.common.js**

**5）开发配置文件webpack.dev.js**

const merge = require('webpack-merge');
    const common = require('./webpack.common.js');
    module.exports = merge(common, {
       devtool: 'inline-source-map',
       devServer: {
         contentBase: './dist'
       }
    });

**6）开发配置文件webpack.prod.js**

const merge = require('webpack-merge');
    const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
    const common = require('./webpack.common.js');
    
    module.exports = merge(common, {
      plugins: [
         new UglifyJSPlugin()
       ]
    });

**7）更改package.json，分别加入生产和开发的构建方式**

{
        "name": "webpack-demao",
        "version": "1.0.0",
        "description": "",
        "main": "webpack.config.js",
        "scripts": {
         "start": "webpack-dev-server --open --config webpack.dev.js",
         "build": "webpack --config webpack.prod.js"
        },
        "keywords": [],
        "author": "",
        "license": "ISC",
        "devDependencies": {
          "clean-webpack-plugin": "^0.1.17",
          "css-loader": "^0.28.4",
          "csv-loader": "^2.1.1",
          "express": "^4.15.3",
          "file-loader": "^0.11.2",
          "html-webpack-plugin": "^2.29.0",
          "style-loader": "^0.18.2",
          "webpack": "^3.0.0",
          "webpack-dev-middleware": "^1.12.0",
          "webpack-dev-server": "^2.9.1",
          "webpack-merge": "^4.1.0",
          "xml-loader": "^1.2.1"
        }
      }