webpack5 配置笔记

Webpack的核心概念包括entry（入口）、output（输出）、loader（加载器）和plugin（插件）

const path= require("path")

const HtmlWebpackPlugin = require('html-webpack-plugin')

const loader = require("css-loader")

module.exports = {

        mode: 'development',

        // 入口文件

        entry: {

                main: './src/main.js'

        },

        // 出口文件

        output: {

                // 输出到dist文件夹（打包自动生成）

                path:path.resolve(__dirname, 'dist'),

                // 输出文件名在dist文件夹里的js文件夹的chunk.js

                filename: 'js/chunk-[contenthash].js', // 使用由生成的内容产生的hash

                clean: true //每次运行打包命令之后自动覆盖

        },

        // 插件（不止一个，所以是数组）

        plugins: [

                new HtmlWebpackPlugin({

                        // 选择模板

                        template: './public/index.html',

                        // 打包以后的名称

                        filename: 'index.html',

                        // js插入到body

                        inject:'body'

                })

        ],

module: {

        rules: [

                {

                        test: /\.css$/, //正则匹配css文件

                        use:['style-loader', 'css-loader'] //注意顺序！是重后往前加载的（即先加载css-loader,在加载style-loader）

                },

                {

                        test: /\.less$/,//正则匹配less文件

                        use: ['style-loader', 'css-loader', 'less-loader']

                },

                {

                        test: /\.(png|jpe?g|gif|webp|ico)$/, //正则匹配图片文件

                        type: 'asset', //使用asset模块相当于就是webpack4中使用了url-loader来处理

                        generator:{//生成文件

                                // 输出文件名

                                filename: 'img/[name].[hash:6][ext]'

                        },

        parser: { //匹配图片大小

                dataUrlCondition:{ // 图片大小小于10kb

                        maxSize: 10 * 1024

                }

        }

},

{

        test: /\.js$/, // js

                use:{

                        loader: 'babel-loader', // 使用babel-loader

                        options: {

                                presets: ['@babel/preset-env'] //使用@babel/preset-env

                        }

                }

        }

        ]

        }

}

以下是一些常用的Webpack loader及其作用：

babel-loader：将ES6+代码转换为ES5语法，以便在旧版本的浏览器中运行。
style-loader 和 css-loader：用于处理CSS文件。css-loader主要负责处理样式文件中的import和url语句，而style-loader将转换后的CSS模块直接注入到HTML页面中。
file-loader 和 url-loader：用于处理图片和其他资源文件。file-loader会为每一个文件生成一个对应的文件，而url-loader将小于设定大小的文件转换为base64编码的URL，减少HTTP请求。
sass-loader 和 less-loader：用于处理Sass和Less预处理器。它们将Sass和Less代码转换为普通的CSS代码。
postcss-loader：用于为CSS代码添加浏览器兼容性前缀，以确保在不同浏览器上的一致性。
html-loader：用于处理HTML文件，将其中的图片等资源转换为Webpack可以识别的模块。
                        
参考链接：https://blog.youkuaiyun.com/weixin_46714216/article/details/140741361