用webpack构建项目(4)-通过mode构建不同的项目环境

一般项目都有开发，测试，生产(线上)环境。有的可能还会存在演示、预发布等环境等。对于大部门项目来说，开发、测试、生产这3个环境就足够使用了。

配置环境所需模块

    npm i webpack-merge -D
    npm i webpack-dev-server -D
    npm i @soda/friendly-errors-webpack-plugin -D

项目目录结构

    F:\webpack-demo
    ├── dist/
    ├── package.json
    ├── public/
    |  └── index.html
    ├── README.md
    ├── src/
    |  ├── index.js
    |  └── style.css
    ├── webpack.common.js   <!-- 多个环境的公用配置 -->
    ├── webpack.dev.js      <!-- 配置开发环境 -->
    ├── webpack.prod.js     <!-- 配置生成环境 -->
    └── webpack.test.js     <!-- 配置测试环境 -->

配置webpack.common.js

    const path = require("path");
    const HtmlWebpackPlugin = require("html-webpack-plugin");   // 引入html-webpack-plugin插件

    module.exports = {
        mode:"none",                // 模式(mode):webpack 使用相应模式的内置优化
        entry: "./src/index.js",    // 入口(entry):webpack打包的入口
        output: {                   // 输出(output):webpack编译打包后的文件输出的位置
            filename: 'main.js',
            path: path.resolve(__dirname, 'dist'),
            clean: true,            // 每次构建前清理 /dist 目录
        },
        plugins:[                   // 插件(plugin)：打包优化，资源管理，注入环境变量。
            new HtmlWebpackPlugin({
                title:"webpack-笔记",                // 用于生成的HTML文档的标题
                filename: "index.html",             // 指定打包生成html文件的名称
                template: "./public/index.html",    // 指定使用哪个html文件为模板,如果不指定会使用默认配置
                minify: {                           // 优化html-webpack-plugin生成的html文件
                    collapseWhitespace: true,       // 设置为true 压缩html,去掉html文件中的空格，换行
                },
                inject: true,                       // 默认为true，打包和自动引入js、css等文件。  设置为false不会自动引入js、css等文件
                // chunks: ["main"],  用于多入口，指定加载哪些入口文件(chunks)，多页应用会用到
            })
        ],
        module: {                   // loader：处理其他类型的文件，webpack只能处理JavaScript和JSON文件，要处理其他文件就需要loader
            rules: [
                {
                    test: /\.css$/i,
                    use: ['style-loader', 'css-loader'],
                    // 保证 loader 的先后顺序：'style-loader' 在前，而 'css-loader' 在后。
                    // css-loader先处理css文件，在处理css样式
                },
            ],
        }
    };

配置webpack.dev.js

    const { merge } = require("webpack-merge");
    const common = require("./webpack.common.js");
    const FriendlyErrorsWebpackPlugin = require("@soda/friendly-errors-webpack-plugin");

    module.exports = merge(common, {
        mode: "development",
        devtool: "inline-source-map",               // source map: 可以将编译后的代码映射回原始源代码
        plugins: [
            new FriendlyErrorsWebpackPlugin(),      // 配置终端输出日志(报错、警告等)
        ],
        devServer: {                                // webpack-dev-server
            static: "./dist",                       // 配置从那个目录给devServer提供静态文件
            compress: true,                         // 利用 gzips 压缩 dist/ 目录当中的所有内容并提供一个本地服务(serve)
            port: 8080,                             // 设置服务端口
            hot: true,                              // 启用 webpack 的热模块替换(热更新)
        },
        stats: "errors-only",                       // 配置终端输出日志
    });

配置webpack.prod.js

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

    module.exports = merge(common, {
        mode: "production",
        devtool: "source-map",
    });

配置webpack.test.js

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

    module.exports = merge(common, {
        mode: "production",
        devtool: "inline-source-map",
    });

配置package.json

  "scripts": {
        "start": "webpack serve --open --config webpack.dev.js",
        "build": "webpack --config webpack.prod.js",
        "build:test": "webpack --config webpack.test.js"
  },

--open 表示自动打开浏览器

运行&打包

    npm start               # 运行开发环境  浏览器访问：http://localhost:8080/
    npm run build           # 生产环境打包   
    npm run build:test      # 测试环境打包

loader参考:

webpack-merge
webpack-dev-server
webpack-dev-server配置
模式(Mode)
Devtool, source map
stats
@soda/friendly-errors-webpack-plugin