algorithm-visualization/webpack.config.js

/**
 * webpack 配置文件
 *
 * @author coder-xiaomo
 * @date   2022-05-17
 */

const { resolve } = require('path');

const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
    // 入口起点
    entry: {
        html: "./src/index.html",
        style: "./src/webpack-style.js",
        // script: "./src/webpack-script.js",
    },
    // 输出
    output: {
        // 输出文件名
        filename: 'assets/js/built.[contenthash:8].js',
        chunkFilename: 'assets/js/[id].[contenthash:8].js',
        // 输出路径     __dirname: 当前文件的目录绝对路径
        path: resolve(__dirname, 'dist')
    },
    // loader配置
    module: {
        rules: [
            // 详细配置
            // {
            //     // 匹配文件
            //     test: /\.css$/,
            //     // 使用哪些 loader 进行处理
            //     use: [ // 执行顺序：从后往前
            //         // 'style-loader', // 创建 style 标签并插入
            //         MiniCssExtractPlugin.loader, // 将 css 从 js 文件中提取出来（替代 'style-loader' ）
            //         'css-loader'    // 将 css 文件编程 commonjs 模块加载到 js 中（样式字符串）
            //     ]
            // },
            {
                // 匹配文件
                test: /\.css$/,
                // 使用哪些 loader 进行处理
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
            // {
            //     test: /\.(jpg|png|gif)$/,
            //     loader: 'url-loader',
            //     options: {
            //         // 图片小于 8KB，则使用 base64 处理（减少请求数量）
            //         limit: 8 * 1024,
            //         // 问题：url-loader 默认使用es6模块化解析，而html-loader引入图片是commonjs
            //         // 解析时会出问题: [object Module]
            //         // 解决：关闭ur1-loader的es6模块化，使用commonjs解析
            //         esModule: false,

            //         // 给图片进行重命名
            //         // [hash:10] 取图片的 hash 的前10位
            //         // [ext] 取文件原来扩展名
            //         name: '[hash:10].[ext]',
            //         outputPath: "assets/image"
            //     }
            // },
            {
                test: /\.html/,
                // 处理 html 文件的 img 图片（负责引入 img，从而能被 url-loader 处理）
                loader: 'html-loader'
            },
            // 打包其他资源
            {
                exclude: /\.(css|js|html|less|jpg|png|gif)$/,
                loader: 'file-loader',
                options: {
                    name: '[hash:10].[ext]',
                    outputPath: "assets/others"
                }
            },
        ]
    },
    // plugin配置
    plugins: [
        // 创建一个html，自动引入打包的所有资源
        new HtmlWebpackPlugin({
            template: './src/index.html',
            inject: 'body',
            scriptLoading: 'blocking'
        }),
        new MiniCssExtractPlugin({
            filename: "assets/css/built.[contenthash:8].css"
        }),
        new CleanWebpackPlugin()
    ],
    // 模式
    // mode: 'development',
    // mode: 'production',

    // 开发服务器 只会在内存中编译打包，不会有任何输出
    devServer: {
        static: resolve(__dirname, 'dist'), // 项目构建后路径
        compress: true, // 启动 GZIP 压缩
        port: 3000,
        open: true      // 自动打开浏览器
    }
}