官方完整配置字段解析篇
个人webpack学习：基础配置, 如下
在开始webpack配置学习前需要先理解一些核心概念：
/*
cmd webpack打包命令行 npx webpack --mode=development
--mode=* ：
none, development 或 production（默认）
在module中没有配置mode字段时命令行可携带改关键词
不携带该关键词执行时默认production模式
*/
module.exports = {
// 打包模式，production 、 development 、 none
mode: 'development',
// 不做entry对象的设置时，文件入口默认src文件夹index.js
entry: {
app: './src/app.js', // app入口
search: './src/search.js' // search入口
},
// output 告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件
// 主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。
// 引用node模块的path，对入口文件路径做解析，多入口文件构建生成对应的chunk文件
// -- chunk文件即一个个module板块编译最终生成的源代码版本文件
output: {
path: path.join(__dirname, 'dist'),
filename: '[name]_[hash:8].js' // js文件指纹设置，chunkhash 给定8位数
},
module: {
// TODO: 值得注意的是： loader的调用时链式调用的，执行时从右到左的顺序执行
// so，当需要解析less文件时，loader的编写顺序就需要按照依赖的深度顺序书写
// 如下先style -> css -> less loader
rules: [
{
test: /\.jsx?$/, // 匹配规则，对符合规则的文件进行处理
loader: 'babel-loader', // --- 1 --
exclude: /node_modules/ // 排除node_modules文件夹，该文件夹不需要我们进行编译
// use: ['babel-loader'] // -- 2 --
/* use: { // -- 3 --
loader: 'babel-loader',
options: {
presets: ["@babel/preset-env"], // 一系列babel plugins的集合
plugins: [
[
"@babel/plugin-transform-runtime",
{ corejs: 3 },
]
]
}
} */
// TODO: 此处关于babel-loader的option配置另一书写方式
// 在根目录文件下创建 .babelrc文件，将options对象的配置置于(.babelrc)文件中，
// 并使用module.exports导出。
},
{ // css文件的解析
test: /.css$/,
use: [
// 'style-loader', // 将css样式内置到js文件中
MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
[
'autoprefixer',
{ overrideBrowserslist: ['last 2 version', }
]
]
},
}
}
]
},
{
test: /.less$/, // less文件的解析
use: [
// 'style-loader',
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader', // less-loader 依赖less，so 安装less-loader的同时需要安装less
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
[
'autoprefixer',
{ overrideBrowserslist: ['last 2 version', '>1%', 'ios 7'] }
]
]
},
}
},
{
loader: 'px2rem-loader',
options: {
remUnit: 75,
remPrecision: 8
}
}
]
},
// { // 图片资源解析，字体文件的解析
// test: /.(png|jpg|jpeg|webp|gif)$/,
// use: 'file-loader' // file-loader 同时可用于字体文件的解析
// },
// { // 图片资源解析，字体文件的解析, 相较于file-loader，url-loader可以对较小文件资源进行base64 的自动转换设置
// test: /.(png|jpg|jpeg|webp|gif)$/,
// use: [
// {
// loader: 'url-loader',
// options: {
// limit: 10240 // 设置10240字节即10k大小内的图片资源进行base64的资源转换
// }
// }
// ]
// },
{ // 图片资源解析，字体文件的解析, 相较于file-loader，url-loader可以对较小文件资源进行base64 的自动转换设置
test: /.(png|jpg|jpeg|webp|gif)$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name]_[hash:8].[ext]' // 图片资源/字体资源，采用hash标识，给定8位数，ext为文件后缀占位符
}
}
]
}
],
},
// plugins 数组模式，存放所有的 webpack plugins配置，各种更广泛化的功能如压缩打包，编译，资源注入等
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, 'src/app.html'),
filename: 'app.html', //打包后的文件名
chunks: ['app'],
minify: {
removeAttributeQuotes: false, //是否删除属性的双引号
collapseWhitespace: false, //是否折叠空白
},
hash: false //是否加上hash，默认是 false
}),
new HtmlWebpackPlugin(
template: path.join(__dirname, 'src/search.html'),
filename: 'search.html', //打包后的文件名
chunks: ['search'],
// html的打包压缩
minify: {
removeAttributeQuotes: true, //是否删除属性的双引号
collapseWhitespace: true, //是否折叠空白
},
hash: true //是否加上hash，默认是 false
}),
new webpack.HotModuleReplacementPlugin(),
// 将css独立文件
new MiniCssExtractPlugin({
filename: '[name]_[contenthash:8].css',
}),
new OptimizeCssAssetsWebpackPlugin({
assetNameRegExp: /\.css$/g,
cssProcessor: require('cssnano')
}),
// 删除置顶目录
// new CleanWebpackPlugin(),
],
}
