webpack常用配置记录

{
    output: {
        libraryExport: 'default' // 跟libraryTarget搭配使用，配置导出哪个属性
    },
    plugins: [
        // 自动加载模块，而不必到处 import 或 require。类似babel-plugin-import
        new webpack.providePlugin({
            React: 'react',
            _map: ['lodash', 'map']
        }),
        new MiniCssExtractPlugin() // 单独打包css文件
    ],
    module: {
        rules: [
            {
                test: /\.css|.less$/,
                use: [
                    "style-loader", // 开发环境将css代码插入dom树
                    MiniCssExtractPlugin.loader,// 生产环境单独打包css文件（mini-css-extract-plugin）
                    "style-loader", // 解析css代码中的@import和url()
                    "postcss-loader", // 增强css(eg: 自动添加css前缀, 转换css单位等)
                    "less-loader" // 解析less文件


                ]
            },
            {
                test: /\.jpg|.png$/,
                type: 'asset/resource' // 将资源打包并且导出对应的url。对应webpack4中的file-loader
                type: 'asset/inline' // 将资源导出为data URL。对应webpack4的url-loader
                type: 'asset/source' // 导出资源的源代码。对应webpack4的raw-loader
                type: 'asset' // 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现。
            }
        ]
    },
    optimization:{
        minimize: true, // 启用默认的TerserPlugin配置压缩js
        minimizer:[ // 自定义压缩策略
            new OptimizeCSSAssetsPlugin({}), // 压缩css（optimize-css-assets-webpack-plugin）
            new TerserJSPlugin() // 压缩js（terser-webpack-plugin）

        ]
    },
    externals: {
        // 将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖。
        react: 'React', // key为包的名称，值为包暴露出来的变量        'react-dom': 'ReactDOM'
    },
    resolve: {
        extensions: ['js', 'jsx', 'tsx'] // 配置webpack解析路径的后缀
        alias: {
            utils: path.resolve(__dirname, 'utils') // 配置路径别名
        },
        modules: ["./node_modules"] // 配置webpack寻找包的路径
    }
}