今天想给大家分析一下webpack的打包文件webpack.config.js
一.我把打包分为几步
1.设置入口
2.设置输出
3.loader
4.plugin
5.mode
6.浏览器兼容性
7.环境
二.如何构建一个webpack.config.js文件
1.设置入口
入口起点(entry point) 指示 webpack 应该使用哪个模块，来作为构建其内部 依赖图(dependency graph) 的开始。
module.exports = { // 这里是commrnt.js语法
// 入口文件
entry:"./src/main.js",
2.设置输出
output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。
output:{
// 输出的路径 是绝对路径(导入path模块) 这里是用node来做的
path:path.resolve(__dirname,'dist'),
// 输出的文件名称
filename:'build.js',
},
3.loader
webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用。
// loader的配置
module:{
rules:[
// 详细loader配置
// 打包css的配置
{
// 使用正则表达式,匹配那些文件
test: /\.css$/,
use:[
// use数组中loader执行顺序, 从右到左, 从下到上, 依次执行
// 创建style标签, 将js中的样式资源插入进行, 添加到head中生效
'style-loader',
// 将css文件变成commitjs模块加载js中, 里面的内容是样式字符串
'css-loader'
]
},
// 打包scss的配置
{
test: /\.scss$/,
// 注意 是sass-loader ，不是 scss-loader
// 是数组,代表的是要使用多个loader处理,用use
use: [
'style-loader',
'css-loader',
// 将scss文件编译成css文件
'sass-loader'
]
},
{
// 问题:默认处理不了html中img图片
// 处理图片资源
test: /\.(jpg|png|gif)/,
// 使用一个loader时,直接写就行了
loader:'url-loader',
options:{
// 图片大小小于8KB,就会被base64处理
// 优点:减少请求数量(减轻服务器压力)
// 缺点:图片体积会增大, 就会导致文件请求速度更慢
limit: 8 * 1024,
// 问题: 因为url-loader默认使用es6模块化解析,
// 而html-loader引入图片commonjs
// 解析时会出问题: [object Module]
// 解决: 关闭url-loader的es6模块化, 使用commonjs解析
esModule: false,
// 给图片进行重命名
// [hash:10]取图片的hash的前10位
// [ext]去文件原来扩展名
name: '[hash:10].[ext]'
}
},
{
test: /\.(eot|ttf|svg|woff)$/,
use: {
loader: 'file-loader',
options: {
// 打包后的字体图标放在 icon 目录下
// 文件名跟格式和打包前保持一致
name: 'icon/[name].[ext]',
}
}
},
{
test:/\.html$/,
// 处理html文件的img图片 (负责引入img, 从而能被url-loader进行处理)
loader:'html-loader'
}
]
},
4.plugin
loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。
// plugins的配置
plugins:[
// 详细plugins的配置
// 因为是直接引的,所以 new 就好了
// 功能:默认会创建一个空的HTML文件,自动引入打包输出的所有资源(JS/CSS)
new HtmlWebpackPlugin({
// 复制 './src/index.html'文件,并自动引入打包输出的所有资源(JS/CSS)
template:'./src/index.html'
})
],
5.模式
通过选择 development, production 或 none 之中的一个，来设置 mode 参数，你可以启用 webpack 内置在相应环境下的优化。其默认值为 production。
// 使用开发模式打包
mode:"development"
- 浏览器兼容性
Webpack 支持所有符合 ES5 标准 的浏览器（不支持 IE8 及以下版本）。webpack 的 import() 和 require.ensure() 需要 Promise。如果你想要支持旧版本浏览器，在使用这些表达式之前，还需要 提前加载 polyfill。
7.环境
Webpack 5 运行于 Node.js v10.13.0+ 的版本。
