webpack简单配置

记录webpack的一些常用的配置

一、webpack五大核心概念

1 entry入口

开始应用程序打包过程的一个或多个起点。如果传入数组，则会处理所有条目。
动态加载的模块 不是 入口起点。
一个需要考虑的规则：每个 HTML 页面都有一个入口起点。单页应用(SPA)：一个入口起点，多页应用(MPA)：多个入口起点。

module.exports = {
  //...
  entry: {
    main: './main.js',
    app: './app.js',
    index: './index.js',
  },
};

2 output 输出

打包输出的出口配置

output: {
        /**
         * 开发环境没有输出
         */
        path: path.resolve(__dirname, '../dist'),
        // 文件名
        filename: 'js/[name].[contenthash:8].js',
        chunkFilename: 'js/[name].[contenthash:8].chunk.js',
        assetModuleFilename: 'static/[hash:10][ext][query]',
        clean: true, // 每次打包之前自动删除原来的路径下的文件
    },

3 module

这些选项决定了如何处理项目中的不同类型的模块(使用loader)。

module: {
        rules: [{
                test: /\.css$/i,
                use: getStyleLoader(),
            },
            {
                test: /\.s[ac]ss$/i,
                use: getStyleLoader('sass-loader'),
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        maxSize: 8 * 1024 // 8kb
                    }
                }
            },
            {
                test: /\.m?js$/,
                exclude: /node_modules/,
                use: [{
                        loader: 'thread-loader',
                        options: {
                            work: Threads
                        }
                    },
                    {
                        loader: 'babel-loader',
                        options: {
                            cacheDirectory: true, // 开启babel编译缓存
                            cacheCompression: false // 关闭缓存压缩，节约打包时间
                        }
                    }
                ]
            }
        ]
    },

4 plugins

plugins 选项用于以各种方式自定义 webpack 构建过程。webpack 附带了各种内置插件，可以通过 webpack.[plugin-name] 访问这些插件。

new HtmlWebpackPlugin({
            template: path.resolve(__dirname, '../public/index.html') // 打包html文件以此文件为模板
        }),
        new MiniCssExtractPlugin({ // 提取样式文件用link标签引入,解决闪屏问题
            filename: 'styles/main.css',
            chunkFilename: 'styles/[name].[coontenthash:8].css'
        }),
        new ESLintPlugin({
            context: path.resolve(__dirname, "../src"), // 检查目录
            cache: true, // 开启eslint检查缓存
            cacheLocation: path.resolve(__dirname, "../node_modules/.cache/eslint-cache"), // 缓存目录
            threads: Threads // 开启多进程和设置进程数量
        }),
        new WorkboxPlugin.GenerateSW({
            // 这些选项帮助快速启用 ServiceWorkers
            // 不允许遗留任何“旧的” ServiceWorkers
            clientsClaim: true,
            skipWaiting: true,
        })
        // new PreloadWebpackPlugin({
        //     rel: 'prefetch'
        // })

5 mode

通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。

二、完整配置

1.配置打包入口和输出(以开发环境、单入口为例)

	entry: {
        main: path.resolve(__dirname, "../src/main.js")
    },
    output: {
        filename: "js/[name].js",
        path: undefined
    },

2 配置module, 使用loader处理各种文件资源，使用babel-loader处理js

module: {
        rules: [
            // 处理css
            {
            	test: /\.css$/,
            	use: [
            	'style-loader',
        		'css-loader',
        		{
            	loader: 'postcss-loader',
            	postcssOptions: {
                	plugins: ["postcss-preset-env"] // 能解决大部分样式兼容问题, 需要在													package.json中指定处理的程度范围
            		}
        		},
            	]
            },
            // 处理scss
            {
            	test: /\.s[ac]ss$/,
            	use: [
                'style-loader',
        		'css-loader',
        		{
            	loader: 'postcss-loader',
            	postcssOptions: {
                	plugins: ["postcss-preset-env"] // 能解决大部分样式兼容问题, 需要在													package.json中指定处理的程度范围
            		}
        		},
        		'sass-loader']
            },
            // 处理less
            {
            	test: /\.less$/
            	use: [
                'style-loader',
        		'css-loader',
        		{
            	loader: 'postcss-loader',
            	postcssOptions: {
                	plugins: ["postcss-preset-env"] // 能解决大部分样式兼容问题, 需要在													package.json中指定处理的程度范围
            		}
        		},
        		'less-loader']
            },
            // 处理图片
            {
                test: /\.(jpe?g|png|webp|svg|gif)$/,
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        maxSize: 10 * 1024
                    }
                }
            },
            // 处理其他资源
            {
                test: /\.(woff2?|ttf)$/,
                type: 'asset/resource'
            },
            // 处理js
            {
                test: /\.jsx?$/,
                include: path.resolve(__dirname, "../src"),
                loader: "babel-loader",
                options: {
                    cacheDirectory: true,
                    cacheCompression: false
                }
            }
        ]
    },

3 配置plugins

使用eslint开启代码检测

plugins: [
		new HtmlWebpackPlugin(),
        new EslintWebpackPlugin({
            context: path.resolve(__dirname, "../src"),
            exclude: "node_modules",
            cache: true,
            cacheLocation: path.resolve(__dirname, "../node_modules/.cache/eslintCache")
        })
	]

4 代码优化

开启代码分割，将那些在多个文件中被引用的模块提取为单独的一个模块，避免重复打包
开启runtimaeChunk，避免那些被引用的chunk在只改变一部分的情况下导致所有引用文件都被改变

optimiziation: {
        splitChunks: {
            chunks: 'all'
        },
        runtimeChunk: {
            name: (entrypoint) => `runtime~${entrypoint.name}.js`
        }
    },

5 其他配置

    // 开启sourcemap，打包成生成map文件方便代码调试
    devTool: 'cheap-module-sourece-map',
    // 开启开发服务器
    devServer: {
        host: 'localhost',
        port: 80,
        open: true,
        hot: true // 开启热模块替换
    },
    mode: 'development'