webpack4.15.1 学习笔记(五) — 生产环境构建

webpack4.15.1 学习笔记(五) — 生产环境构建

 

 

目录

• 生产环境构建
  • 指定环境

 

生产环境构建

development和production的构建目标差异很大。dev中，需要具有实时重新加载或HMR能力的 source map 和 server。而在prod中目标则关注更小的 bundle，更轻量的 source map，以及更优化的资源，以改善加载时间。由于要遵循逻辑分离，通常建议为每个环境编写彼此独立的webpack 配置。

虽然将两者做了略微区分，但是还是会遵循不重复原则(DRY)，保留一个通用配置，不必在环境特定的配置中重复代码。再使用 webpack-merge 的工具将这些配置合并在一起。

安装 webpack-merge 将配置代码进行分离：

npm install --save-dev webpack-merge

创建对应环境的配置和通用配置文件：

webpack.common.js 中，设置了 entry 和 output ，并且引入两个环境公用的全部插件。

webpack.dev.js 中，添加了推荐的 source map和devServer。

webpack.prod.js 中，引入了 tree shaking的相关配置。

webpack.common.js

const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: {
        app: './src/index.js'
    },
    output: {
       filename: '[name].bundle.js',
       path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new CleanWebpackPlugin({
            cleanStaleWebpackAssets: false
        }),
        new HtmlWebpackPlugin({
            title: 'Production'
        })
    ],
};

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'
    }
});

webpack.prod.js

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

module.exports = merge(common, {
    devtool: 'source-map',
    optimization: {
        usedExports: true,  
        minimize: true, 
    },
});

设置新的scripts 执行命令，运行脚本查看输出结果的变化：

"scripts": {
    "devbuild": "webpack-dev-server --open --config webpack.dev.js",
    "prodbuild": "webpack --config webpack.prod.js"
},

指定环境

NODE_ENV 是由 Node.js 暴露给执行脚本的系统环境变量。通常用于决定在开发环境与生产环境下，服务器工具、构建脚本和客户端库的行为。然而无法 webpack.config.js 中，直接将 process.env.NODE_ENV 设置为 "production"。

许多库与process.env.NODE_ENV 环境变量关联，决定引用哪些内容。当处于开发环境时，为了分布调试，可能会添加额外的日志和测试。使用 process.env.NODE_ENV === 'production' 时，还可能进行代码优化，从而删除或添加一些代码。可以使用 webpack 内置的 DefinePlugin定义这个环境变量：

webpack.prod.js

const webpack = require('webpack');
module.exports = merge(common, {
    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('production')
        })
    ]
});

JS 复制 全屏

修改入口 index.js ，查看环境变量的值，重新编译和打包后：

// index.js
console.log( process.env.NODE_ENV );   // 执行 devbuild 打印 'development',执行 prodbuild 打印 'production',