Webpack5 教程生产模式使用

生产模式

可配置为 开发模式 、 生产模式

准备文件

根目录下创建config文件夹，存放坏境配置文件

• config/webpack.dev.js
• config/webpack.prod.js

webpack.dev.js

const path = require("path");
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    //入口
    entry: "./src/main.js",
    //输出
    output: {
        path: undefined, // 开发模式没有输出，不需要指定输出目录
        //入口文件输出文件名
        filename: "static/js/index.js",
    },
    //加载器
    module: {
        rules: [
            //loader配置
            {
                test: /\.css$/i,
                use: [
                    "style-loader", //将JS中的css通过创建style标签添加到html文件中生效
                    "css-loader", //将css自由编译成commonjs的模块到js中
                ],
            },
            {
                test: /\.less$/i,
                //loader:'xx' 只能使用1个loader
                use: [
                    // compiles Less to CSS
                    'style-loader',
                    'css-loader',
                    'less-loader',
                ],
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    // 将 JS 字符串生成为 style 节点
                    'style-loader',
                    // 将 CSS 转化成 CommonJS 模块
                    'css-loader',
                    // 将 Sass 编译成 CSS
                    'sass-loader',
                ],
            },
            {
                test: /\.styl$/,
                loader: "stylus-loader", // 将 Stylus 文件编译为 CSS
            },
            {
                test: /\.(png|jp?g|gif|webp|svg)$/,
                type: "asset",
                parser: {
                    dataUrlCondition: {
                        //小于10kb的图片转base64
                        //有点，减少请求数量，缺点，体积会变大
                        maxSize: 10 * 1024
                    }
                },
                generator: {
                    //hash:10 表示取hash前10位
                    filename: 'static/img/[hash:10][ext][query]'
                }
            },
            //图标设置
            {
                test: /\.(ttf|woff2?)$/,
                type: "asset/resource",
                generator: {
                    //hash:10 表示取hash前10位
                    filename: 'static/font/[hash:10][ext][query]'
                }
            },
            //视频文件
            {
                test: /\.(mp3|avi|mp4)$/,
                type: "asset/resource",
                generator: {
                    //hash:10 表示取hash前10位
                    filename: 'static/video/[hash:10][ext][query]'
                }
            },
            //处理转换es6
            {
                test: /\.js$/,
                exclude: /node_modules/, // 排除node_modules代码不编译
                loader: "babel-loader",
            },
        ]
    },
    //插件
    plugins: [
        //
        new ESLintPlugin({
            //检查目录下的文件
            context: path.resolve(__dirname, "../src")
        }),
        new HtmlWebpackPlugin({
            // 以 public/index.html 为模板创建文件
            // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
            template: path.resolve(__dirname, "../public/index.html"),
        }),
    ],
    // 开发服务器
    devServer: {
        host: "localhost", // 启动服务器域名
        port: "3000", // 启动服务器端口号
        open: true, // 是否自动打开浏览器
    },
    //模式
    mode: "development"
}

webpack.prod.js

const path = require("path");
const ESLintPlugin = require('eslint-webpack-plugin');
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    //入口
    entry: "./src/main.js",
    //输出
    output: {
        //输出路径
        //__dirname nodejs的变量，代表当前文件所在的文件夹目录
        path: path.resolve(__dirname, "../dist"), //绝对路径
        //入口文件输出文件名
        filename: "static/js/index.js",
        clean: true, //自动清空上次打包的内容，原理，将path目录清空，再进行打包
    },
    //加载器
    module: {
        rules: [
            //loader配置
            {
                test: /\.css$/i,
                use: [
                    "style-loader", //将JS中的css通过创建style标签添加到html文件中生效
                    "css-loader", //将css自由编译成commonjs的模块到js中
                ],
            },
            {
                test: /\.less$/i,
                //loader:'xx' 只能使用1个loader
                use: [
                    // compiles Less to CSS
                    'style-loader',
                    'css-loader',
                    'less-loader',
                ],
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    // 将 JS 字符串生成为 style 节点
                    'style-loader',
                    // 将 CSS 转化成 CommonJS 模块
                    'css-loader',
                    // 将 Sass 编译成 CSS
                    'sass-loader',
                ],
            },
            {
                test: /\.styl$/,
                loader: "stylus-loader", // 将 Stylus 文件编译为 CSS
            },
            {
                test: /\.(png|jp?g|gif|webp|svg)$/,
                type: "asset",
                parser: {
                    dataUrlCondition: {
                        //小于10kb的图片转base64
                        //有点，减少请求数量，缺点，体积会变大
                        maxSize: 10 * 1024
                    }
                },
                generator: {
                    //hash:10 表示取hash前10位
                    filename: 'static/img/[hash:10][ext][query]'
                }
            },
            //图标设置
            {
                test: /\.(ttf|woff2?)$/,
                type: "asset/resource",
                generator: {
                    //hash:10 表示取hash前10位
                    filename: 'static/font/[hash:10][ext][query]'
                }
            },
            //视频文件
            {
                test: /\.(mp3|avi|mp4)$/,
                type: "asset/resource",
                generator: {
                    //hash:10 表示取hash前10位
                    filename: 'static/video/[hash:10][ext][query]'
                }
            },
            //处理转换es6
            {
                test: /\.js$/,
                exclude: /node_modules/, // 排除node_modules代码不编译
                loader: "babel-loader",
            },
        ]
    },
    //插件
    plugins: [
        //
        new ESLintPlugin({
            //检查目录下的文件
            context: path.resolve(__dirname, "../src")
        }),
        new HtmlWebpackPlugin({
            // 以 public/index.html 为模板创建文件
            // 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
            template: path.resolve(__dirname, "../public/index.html"),
        }),
    ],

    //模式
    mode: "production"
}

在没有配置快捷键方式时，运行配置自定文件命令如下：

npx webpack serve --config ./config/webpack.dev.js

npx webpack  --config ./config/webpack.prod.js

配置指令

为了方便运行不同模式的指令，我们将指令定义在 package.json 中 scripts 里面

// package.json
{
  // 其他省略
  "scripts": {
    "start": "npm run dev",
    "dev": "npx webpack serve --config ./config/webpack.dev.js",
    "build": "npx webpack --config ./config/webpack.prod.js"
  }
}

• 开发模式：npm start 或 npm run dev
• 生产模式：npm run build