配置

常用配置，其余翻看文档

module.exports = {
    mode: 'development',
    entry: './src/main.js',
    devtool: 'source-map', // 配置SourceMap
    devServer: { // 此属性只作用于开发服务器环境
        compress: true, // 启用gzip
        hot: true, // 开启HMR 热更替
        host: '0.0.0.0', // 指定访问地址，4个0时开启局域网访问
        port: 8080, // 指定端口号
        open: true, // 启动后自动打开项目地址
        static: [// 配置静态文件目录（默认是 'public' 文件夹）。将其设置为 false 以禁用
            {
                directory: path.join(__dirname,'public'), // 静态资源目录
                publicPath: '/my' // 从哪个地址访问该目录
            }
        ],
        proxy: { // 配置跨越代理
            '/api': { // 匹配请求前缀
                target: 'http://localhost:3000', // 实际请求地址
                pathRewrite: { '^/api': '' }, // 替换占位
                secure: false, // https证书无效时
            },
        },
    },
    output: {
        path: path.resolve('./dist'), // 输出目录
        publicPath: './', // 编译后，静态资源地址前缀
        clean: true // 清空输出目录
    },
    resolve: {
        alias: {
            Utilities: path.resolve(__dirname, 'src/utilities/'),
            Templates$: path.resolve(__dirname, 'src/to/file.js'),//加$为精准匹配，只需别名
        },
        extensions: ['.js', '.json', '.wasm'], // 引入文件后缀包含在内，可不写后缀
    },
}

plugin

css压缩合并

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
let styleLoaderMode = MiniCssExtractPlugin.loader //替换"style-loader"
plugins: [
    new MiniCssExtractPlugin({
        filename: "css/[name].css",
    }),
]

清空构建目录

• webpack5中被output.clean取代

const {CleanWebpackPlugin} = require('clean-webpack-plugin')
plugins: [
    new CleanWebpackPlugin()
]

自定义html模板

const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
    new HtmlWebpackPlugin({
        template: "./public/index.html",
        title: 'asdf' // 配合DefinePlugin使用，对象名称为htmlWebpackPlugin
    }),
]

在html模板中使用自定义变量

const {DefinePlugin} = require('webpack')
plugins: [
    new DefinePlugin({
        ABC: '"DefinePlugin内置插件的自定义变量"', // 默认是变量引用，需要额外加引号
        __VUE_OPTIONS_API__: true,
        __VUE_PROD_DEVTOOLS__: true,
    }),
]

拷贝静态资源

plugins: [
    new copyWebpackPlugin({
        patterns: [{
            from: './public',
            // to: './dist', 默认指向构建根目录
            globOptions: {
                ignore: ['**/index.html']
            }
        }]
    })
]

vue3 单文件编译

const {VueLoaderPlugin} = require('vue-loader/dist/index')
plugins: [
    new VueLoaderPlugin()
]

loader

file,url

{
    test: /.(eot|ttf|woff2?)$/,
    use: {
        loader: "url-loader",
        options: {
            outputPath: "font",
            name: "urlLoader_[name]_[hash:6].[ext]",
            limit: -1, // 小于此值大小的文件将会调用file-loader编译
        }
    },
},

css相关

普通css

rules: [
    {
        test: /.css$/, //正则表达式,
        use: [
            'style-loader',
            {
                loader: 'css-loader',
                options: {
                    esModule: false // 版本过高需要加
                }
            },
        ]
    },
    {
        test: /.less$/, //正则表达式,
        use: [
            // styleLoaderMode,
            // cssLoaderMode,
            "less-loader",
        ]
    },
]

postcss配置

{
    loader: 'postcss-loader',
    options: {
        postcssOptions: { //配置查看webpack文档
            plugins: [
                [
                    // "autoprefixer",
                    'postcss-preset-env',
                    {
                        // 其他选项
                    },
                ],
            ],
        },
    },
},

babel

{
    test: /.js$/,
    use: {
        loader: 'babel-loader',
        options: {
            presets: [
                [
                    '@babel/preset-env',
                    {
                        // 配置查看babel文档
                    }
                ]
            ],
        }
    },
    exclude: /node_modules/
},