webpack中development和production模式区分配置打包

0.jpg

写在前面

通过前面的学习，我们已经知道，在webpack打包的过程中，分development和production两种模式，并且在不同的模式下，打包的配置项也是不同，但我们目前只有webpack.config.js这一个配置文件，要想每次在不同模式下打包，不修改对应的配置文件，那我们就需要将Development和Production模式下做区分配置

开始配置

我们想要将配置区分开来，就要将原本的webpack.config.js分成俩文件，分别为webpack.dev.js和webpack.prod.js，文件内容，其中webpack.dev.js和原先webapck.config.js一直，因为我们之前的配置都是依照开发环境来配置的。对于webpack.prod.js，我们需要在开发模式的配置中修改一些配置即可。

我们将mode改为production
将source-map配置改为cheap-module-source-map
将devServer配置去掉
去掉HMR配置
去掉本地配置的tree shaking即 usedExports: true,因为在webpack4.0中，production模式下是默认开启tree shaking配置的

这样我们就得到了一个生产环境下的打包配置文件，下面我们对package.json做修改，来优化我们的打包

  "scripts": {
    "dev": "webpack-dev-server --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js"
  }

这样，我们就可以通过执行不同的命令，来区分不同环境下的配置文件了。
但是我们会发现，这种解决方案，在两个配置文件中，会存在很多相同的代码。于是我们想着把相同的代码分离出来。我们在根目录下新建webpack.common.js，我们把两份文件公用的代码拆分到这个文件夹中，于是webpack.common.js就变成了下面这样

const HtmlWebpackPlugin = require('html-webpack-plugin');
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const path = require('path')
module.exports = {
    entry: {
        main: './src/index.js',
    },
    module: {
        rules: [{
            test: /\.(jpg|png|gif)$/,
            use: {
                loader: 'url-loader',
                options: {
                    name: '[name]_[hash].[ext]',
                    outputPath: 'images/',
                    limit: 2048
                }
            }
        },{
            test: /\.(eot|ttf|svg|woff)$/,
            use: {
                loader: 'file-loader'
            }
        },{
            test: /\.scss$/,
            use: [
                'style-loader',
                {
                    loader: 'css-loader',
                    options: {
                        importLoaders: 2,
                    }
                },
                'sass-loader',
                'postcss-loader'
            ],
        },{
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader',
                'postcss-loader'
            ],
        },
        { 
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
        template: 'src/index.html'
        }),
        new CleanWebpackPlugin()
    ],
    output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'dist')
    },
}

拆分是拆分了，但毕竟将来我们执行的是dev.js和prod.js，不能让里面就剩那么一点内容，所以，我们还需要让拆分出来的东西和这两个文件做一个合并再输出。这时候我们需要用到webpack-merge。

npm install webpack-merge -D

然后我们对dev.js做下面的修改

const webpack = require('webpack')
const {merge} = require('webpack-merge')
const commonConfig = require('./webpack.common')

const devConfig = {
    mode: 'development',
    devtool: 'cheap-module-eval-source-map',
    devServer: {
        contentBase: './dist',
        open: true,
        hot: true
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],
    optimization: {
        usedExports: true
    }
}
module.exports = merge(commonConfig, devConfig)

prod.js同理，这里，我们使用的webapck-merge插件，将两个配置做了一个合并，这样，我们就可以把两个环境下公有的配置拆分出来了~
做了上面的配置后，我们试试不同环境下的打包吧~~这样是不是方便了很多呢。其实在一些框架中，会把我们现在的三个webapck配置文件放到一个根目录下的build文件夹中，然后修改对应的packagejson中的指令路径，这样会整洁一些，这里我就不演示了，同学们可以线下自己配一下。。

写在后面

这篇的内容比较简单，但是其中的思想会对比在webpack搭建项目中有很多的帮助。

最后编辑于：2020.08.19 23:51:40