webpack学习之5.环境配置

环境

项目一般要配置两个环境：
开发环境 development ：配置侧重于实时重载、模块热替换HMR、便捷的source map等，在本地搭建服务器运行。
生产环境 production ：配置侧重于文件压缩、轻量的source map、其他发布配置等，打包上传到服务器运行。

遵循逻辑分离，通常建议为每个环境编辑彼此独立的webpack配置。
遵循不重复原则，我们还要保留一个“通用”的配置。

可以使用webpack-merge将通用配置和独立配置合并。

单独配置

首先创建两个环境的配置文件，并分别配置：

// 开发环境
// ./config/webpack.dev.js
const path = require('path');
// 加载插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack');
const hotMiddlewareScript = 'webpack-hot-middleware/client?quiet=true'; // &reload=true 未使用accept重载的，使用reload重载
const HtmlWebpackPlugin = require('html-webpack-plugin');

function joinPath(filepath) {
    return path.join(__dirname, filepath);
}

module.exports = {
    mode: 'development',
    devtool: 'cheap-module-eval-source-map',
    entry: {
        main: [hotMiddlewareScript, joinPath('../src/index.js')],
        util: [hotMiddlewareScript, joinPath('../src/util.js')]
    },
    output: {
        path: joinPath('../dist'),
        filename: '[name].js?v=[hash]', // HMR不能使用chunkhash和contenthash
        chunkFilename: '[id].js?v=[hash]' // HMR不能使用chunkhash和contenthash
    },
    module: {
        rules: [
            {
                test: /\.css$/, // 根据正则匹配.css结尾的文件
                use: [ // 配置loader，倒序使用
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            hmr: true
                        }
                    },
                    { loader: 'css-loader' }
                ]
            }
        ]
    },
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    },
    plugins: [
        new HtmlWebpackPlugin(),
        // 用 MiniCssExtractPlugin 抽离出 css 文件
        new MiniCssExtractPlugin({
            filename: '[name].css?v=[chunkhash]' // name为entry定义的入口名:main
        }),
        new webpack.HotModuleReplacementPlugin()
    ],
}

// 生产环境
// ./config/webpack.prod.js
const path = require('path');
// 加载插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

function joinPath(filepath) {
    return path.join(__dirname, filepath);
}

module.exports = {
    mode: 'production',
    devtool: 'cheap-module-source-map',
    entry: {
        main: [joinPath('../src/index.js')],
        util: [joinPath('../src/util.js')]
    },
    output: {
        path: joinPath('../dist'),
        filename: '[name].js?v=[chunkhash]',
        chunkFilename: '[id].js?v=[chunkhash]'
    },
    module: {
        rules: [
            {
                test: /\.css$/, // 根据正则匹配.css结尾的文件
                use: [ // 配置loader，倒序使用
                    { loader: MiniCssExtractPlugin.loader },
                    { loader: 'css-loader' }
                ]
            }
        ]
    },
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    },
    plugins: [
        new HtmlWebpackPlugin(),
        new CleanWebpackPlugin(),
        // 用 MiniCssExtractPlugin 抽离出 css 文件
        new MiniCssExtractPlugin({
            filename: '[name].css?v=[chunkhash]' // name为entry定义的入口名:main
        }),
    ],
}

配置脚本和服务器

// package.json
{
  "scripts": {
    "build": "webpack --progress --config ./config/webpack.prod.js",
    "server": "node server.js"
  },
  "devDependencies": {
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^3.5.3",
    "express": "^4.17.1",
    "html-webpack-plugin": "^4.3.0",
    "mini-css-extract-plugin": "^0.9.0",
    "style-loader": "^1.2.0",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-middleware": "^3.7.2",
    "webpack-hot-middleware": "^2.25.0",
    "webpack-merge": "^4.2.2"
  }
  // ...
}

// server.js
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware')

const app = express();

// 控制面板\系统和安全\系统\高级系统设置\环境变量 设置一个环境变量NODE_ENV
// 设置完最好重启一下命令行或开发工具
if (process.env.NODE_ENV == 'development') { // 开发环境使用HMR
  const config = require('./config/webpack.dev.js');
  const compiler = webpack(config);
  app.use(webpackDevMiddleware(compiler));
  app.use(webpackHotMiddleware(compiler));
}

app.use(express.static('dist'))

// 在8080端口运行文件
app.listen(8080, function () {
  console.log('Example app listening on port 8080!\n');
});

合并配置

创建webpack.base.js放置通用配置

// ./config/webpack.dev.js
const path = require('path');
// 加载插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    output: {
        path: path.join(__dirname, '../dist'),
    },
    module: {
        rules: [
            {
                test: /\.css$/, // 根据正则匹配.css结尾的文件
                use: [ // 配置loader，倒序使用
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            hmr: true
                        }
                    },
                    { loader: 'css-loader' }
                ]
            }
        ]
    },
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    },
    plugins: [
        new HtmlWebpackPlugin(),
        // 用 MiniCssExtractPlugin 抽离出 css 文件
        new MiniCssExtractPlugin({
            filename: '[name].css?v=[chunkhash]' // name为entry定义的入口名:main
        })
    ],
}

调整dev和prod

// ./config/webpack.dev.js
const merge = require('webpack-merge');
const common = require('./webpack.base.js');

const path = require('path');
// 加载插件
const webpack = require('webpack');
const hotMiddlewareScript = 'webpack-hot-middleware/client?quiet=true'; // &reload=true 未使用accept重载的，使用reload重载

function joinPath(filepath) {
    return path.join(__dirname, filepath);
}

module.exports = merge(common, {
    mode: 'development',
    devtool: 'cheap-module-eval-source-map',
    entry: {
        main: [hotMiddlewareScript, joinPath('../src/index.js')],
        util: [hotMiddlewareScript, joinPath('../src/util.js')]
    },
    output: {
        filename: '[name].js?v=[hash]', // HMR不能使用chunkhash和contenthash
        chunkFilename: '[id].js?v=[hash]' // HMR不能使用chunkhash和contenthash
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
});

// ./config/webpack.prod.js
const merge = require('webpack-merge');
const common = require('./webpack.base.js');

const path = require('path');
// 加载插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

function joinPath(filepath) {
    return path.join(__dirname, filepath);
}

module.exports = merge(common, {
    mode: 'production',
    devtool: 'cheap-module-source-map',
    entry: {
        main: [joinPath('../src/index.js')],
        util: [joinPath('../src/util.js')]
    },
    output: {
        filename: '[name].js?v=[chunkhash]',
        chunkFilename: '[id].js?v=[chunkhash]'
    },
    plugins: [
        new CleanWebpackPlugin(),
    ],
});

效果与单独配置一样

参考

生产环境构建 | webpack