Webpack最佳实践

# 初始化项目,生成package.json
npm init -y

# 安装webpack依赖
npm install --save-dev webpack webpack-cli

# 自动生成index.html文件,plugins 属性
npm install --save-dev html-webpack-plugin

# 打包体积分析工具,plugins 属性
npm install --save-dev webpack-bundle-analyzer

# 安装代码压缩插件terser,optimization 属性
npm install --save-dev terser-webpack-plugin

# 打包css文件,module 属性
npm install --save-dev style-loader css-loader

# 安装babel-loader转译低版本代码,module 属性
npm install --save-dev babel-loader @babel/core @babel/preset-env

# 开发服务器自动打包, devServer 属性
npm install --save-dev webpack-dev-server

const path = require("path"); // 导入path库获取路径
const HtmlWebpackPlugin = require("html-webpack-plugin"); // 导入自动生成index.html插件
const BundleAnalyzer = require("webpack-bundle-analyzer").BundleAnalyzerPlugin; // 导入可视化打包体积分析插件
const TerserPlugin = require("terser-webpack-plugin"); // 导入代码压缩插件

module.exports = {
    mode: "production", // 开发模式打包
    entry: "./src/index.js", // 打包的js入口
    output: {
        filename: "dist.js", // 导出的文件名
        path: path.resolve(__dirname, "dist"), // 导出的绝对位置
    },
    plugins: [
        new HtmlWebpackPlugin({
            // 导入webpack-plugin插件自动生成出口html
            title: "ceshi",
        }),
        new BundleAnalyzer(),
    ],
    module: {
        rules: [
            {
                // style-loader,css-loader
                test: /\.css$/i, // 匹配所有css结尾的文件
                use: ["style-loader", "css-loader"], // 下载的loader需要使用use
            },
            {
                // 使用内置的loader打包静态资源
                test: /\.(png|svg|jpg|jpeg|gif)$/i, // 匹配图片后缀的文件
                type: "asset/resource", // 指定类型为静态资源
            },
            {
                // 使用babel-loader转译
                test: /\.js$/, // 匹配所有.js结尾的文件,为babel服务
                exclude: /node_modules/, // 排除node_modules文件夹
                use: {
                    loader: "babel-loader", // 使用 babel-loader
                    options: {
                        presets: ["@babel/preset-env"], // 转译低版本代码
                    },
                },
            },
        ],
    },
    // 配置terser代码压缩插件
    optimization: {
        minimize: true, // 是否需要压缩
        minimizer: [new TerserPlugin()], // 使用的代码压缩插件
    },
    // 开发服务器
    devServer: {
        static: "./dist",
    },
    // 路径别名
    resolve: {
        alias: {
            utils: path.resolve(__dirname, "src/utils"),
        },
    },
    devtool: "inline-source-map", // 可以查看打包后的源代码
};