webpack——生产环境构建(十)

1.配置
开发环境(development)和生产环境(production)的构建目标差异很大。在开发环境中，我们需要具有强大的、具有实时重新加载(live reloading)或热模块替换(hot module replacement)能力的 source map 和 localhost server。而在生产环境中，我们的目标则转向于关注更小的 bundle，更轻量的 source map，以及更优化的资源，以改善加载时间。由于要遵循逻辑分离，我们通常建议为每个环境编写彼此独立的 webpack 配置。

我们先从安装 webpack-merge 开始，并将之前指南中已经成型的那些代码再次进行分离：
npm install --save-dev webpack-merge

project

webpack.common.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',  //babel-loader:babel和webpack中间的桥梁
                options: {
                    "presets": [
                        [
                        //es6=>es5
                        "@babel/preset-env", {
                            "targets": {
                                // "edge": "17",
                                // "firefox": "60",
                                // "chrome": "67",
                                "safari": "11.1",  //以上版本已经支持es6,不需要再做es6=>es5
                            },
                            useBuiltIns: 'usage'  
                        }
                        ],
                        "@babel/preset-react", //转化react代码
                    ], 
                }
            },
            {
                test:/\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
        ]
    },
    entry: {
        app: './src/index.js',
        // print: './src/print.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
        //publicPath也会在服务器脚本用到,确保资源能够在 http://localhost:3000下正确访问
        //publicPath: '/'  
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        }),
        new CleanWebpackPlugin(),
    ]
}

webpack.dev.js

const webpack = require('webpack')
const merge = require('webpack-merge') //先安装: npm i webpack-merge --save-dev
const commonConfig = require('./webpack.common.js')  
const devConfig = {
    mode: 'development', //默认没有Tree Shaking功能, devtool: cheap-module-eval-source-map
    devtool: 'cheap-module-eval-source-map',
    devServer: {
        contentBase: './dist',
        open: true,
        port: 8080,
        hot: true,
        // hotOnly: true //去掉后更改会自动刷新页面
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',  //babel-loader:babel和webpack中间的桥梁
                options: {
                    "presets": [
                        [
                        //es6=>es5
                        "@babel/preset-env", {
                            "targets": {
                                // "edge": "17",
                                // "firefox": "60",
                                // "chrome": "67",
                                "safari": "11.1",  //以上版本已经支持es6,不需要再做es6=>es5
                            },
                            "corejs": '2',  //解决警告:  We noticed you're using the `useBuiltIns` option without declaring a core-js version
                            useBuiltIns: 'usage'  
                        }
                        ],
                        "@babel/preset-react", //转化react代码
                    ],
                    // plugins: ["dynamic-import-webpack"]  //用于异步模块代码分割,该插件不支持魔法注释,在添加注释时应到package.json中删除它
                    plugins: ["@babel/plugin-syntax-dynamic-import"]  //使用官方插件,参考链接: https://www.babeljs.cn/docs/babel-plugin-syntax-dynamic-import
                }
            },
            {
                test:/\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin() //要先引入webpack,是webpack自带的插件
    ],
    //Tree Shaking配置项
    //在使用MiniCssExtractPlugin时,引入css文件没有使用没有输出,会被摇晃树摇晃掉,需要在package.json配置sideEffects
    // optimization: {
    //     usedExports: true
    // }
}

module.exports = merge(commonConfig, devConfig)

webpack.prod.js

const commonConfig = require('./webpack.common.js')
const merge = require('webpack-merge')
const prodConfig = {
    mode: 'production',
    devtool: 'cheap-module-source-map',
}

module.exports = merge(commonConfig, prodConfig)

现在，在 webpack.common.js 中，我们设置了 entry 和 output 配置，并且在其中引入这两个环境公用的全部插件。在 webpack.dev.js 中，我们为此环境添加了推荐的 devtool（强大的 source map）和简单的 devServer 配置。

2.NPM Scripts
package.json

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