webpack配置介绍

在开发前端项目过程中，经常会使用webpack来对项目进行构建和打包，而webpack有很多的配置，一般我们都将webpack的配置单独写在webpack.config.js内，作为入门指导，本篇文章主要介绍webpack.config.js中的常见字段是什么意思，大致了解每个字段有什么用

基本结构

webpack的配置基本都写在 webpack.config.js 中，其基本结构如下：

module.export = {
    entry: '入口文件路径',
    output: {
        filename: '输出的文件名',
        path: '输出的位置，要用绝对路径',
        assetModuleFilename: '静态资源文件存放的位置'
    },
    module: {
        rules: [
            {
                test: /正则表达式，要匹配的文件后缀/,
                use: ['要使用的loader'],
                options: {} // loader的配置
            }
        ]
    },
    plugins: [
        // webpack插件使用区域
    ],
    mode: 'development', // 模式配置，还有production
    target: 'web', // 指定目标，还有webworker、node
    devServer: {} // webpack-dev-server的配置
}

字段介绍

entry

entry的作用是配置webpack打包的入口文件，也就是“从哪个文件开始打包”。

output

output的作用是webpack打包后的输出配置，常见的有输出的文件名、输出位置等等，其数据格式为 object。

常见字段如下

filename：配置文件名，可以写死，也可以采用类似 [hash].js 的形式
path：配置入口文件打包后输出的位置，必须是绝对路径，可以用node中的path模块来拼接绝对路径
assetModuleFilename：配置静态资源如图片等打包后的存放位置，可以是相对路径，也可以是绝对路径，同样的，存放位置也支持 hash 形式

示例

const path = require('path')
module.exports = {
    output: {
        filename: '[hash:8].js', // :8代表只要8位长度的hash，也可以不写
        path: path.resolve(__dirname, 'dist'), // 打包后文件输出到dist目录下
        assetModuleFilename: 'assets/[hash][ext]', // 静态资源文件存放在dist/assets目录下，文件名用hash形式，ext代表文件后缀
    }
}

module

rules

rules主要用于配置 loader，其数据格式为数组对象，如下

rules: [
    {/*loader配置*/},
    {/*loader配置*/},
    {/*loader配置*/},
]

由于webpack只认识js和json，并不认识其它类型的文件，假如我们的代码或项目中引入了图片、预处理器之类的文件时，webpack将无法打包。

这时，loader 就起到了解决这个问题的作用，我们要知道，loader 的作用就类似于一个翻译官，把那些webpack不认识的文件，处理成可以让webpack认识的文件，就好比你(webpack)看不懂外文，借助翻译软件(loader)，你就能看懂了。

要想让webpack能够处理别的文件，我们就需要对某类文件进行相应的loader配置，其常见的配置字段如下：

test：通过正则表达式匹配我们要处理的文件
use：格式为数组或数组对象，在里面写上我们需要用到的所有loader
loader：相当于 use 的简写，格式为字符串，跟 use 的区别在于，loader只能配置一个loader，而 use 为数组，可以配置多个loader
options：格式为对象，用于对我们的loader进行配置
type：格式为字符串，为 webpack5 新增，常用于处理静态文件的输出和存储方式
parser：格式为对象，为 webpack5 新增，常用于处理静态文件的输出和存储方式
generator：格式为对象，为 webpack5 新增，常用语处理静态文件的生成配置，如文件名等等

type、parser、generator可以去webpack官网进行参考
https://webpack.docschina.org/configuration/module

示例：

module.export = {
    module: {
        rules: [
            {
                // 匹配css文件
                test: /\.css$/,
                // 使用style和css这2个loader
                use: ['style-loader', 'css-loader']
            },
            {
                // 匹配图片文件，忽略大小写
                test: /\.(jpe?g|png|gif|webp)$/i,
                // 表明以静态资源方式进行处理
                type: 'asset',
                // 解析配置
                parser: {
                    // base64编码配置
                    dataUrlCondition: {
                        maxSize: 8 * 1024, // 如果图片小于8kb，则采用base64进行编码
                    }
                },
                // 静态文件生成配置
                generator: {
                    // 输出位置和文件名，assets位于dist目录下
                    filename: 'assets/[hash][ext]'
                }
            }
        ]
    }
}

详细字段自行去webpack官网查看
https://webpack.docschina.org/configuration/module

mode

模式配置，设置webpack的打包模式，其数据格式为字符串，其可选值如下

development：代表在开发环境下，此时webpack打包编译的时候会省略掉一些优化处理
production：代表在生产环境下，此时webpack打包编译的时候会进行部分优化，例如代码压缩、去除注释等等。

target

类型：string、[string]、false

描述：用于配置编译的目标，告知 webpack 为目标(target)指定一个环境。默认值为 "browserslist"，如果没有找到 browserslist 的配置，则默认为 web。

常用的值如下：

web：指定打包后的东西运行在浏览器中。
node：指定打包后的东西运行在node中。
esX：编译为指定版本的js代码。

其它详细字段可以参考官网

devtool

类型：string

描述：用于生成source-map源代码映射文件。