前言
手摸手教你如何打包,让你在动手的实践过程中感受webpack。
在动手之前,你可先简单了解一下webpack的概念
每一小结都有对应的分支,方便大家学习
webpack版本:5.58.1
入门
新建一个目录,初始化npm
npm init
接下来安装webpack
和webpack-cli
两个包
npm i -D webpack webpack-cli
默认配置
新建一个文件夹src
,里面新建一个main.js
,写一点测试代码
console.log("webpack")
在package.json中scripts中添加新的命令
"scripts": {
"build": "webpack ./src/main.js"
},
执行打包命令npm run build
此时如果生成了一个dist文件夹,并且内部含有main.js说明已经打包成功了
这个例子只是webpack自己默认的配置,下面我们要实现更加丰富的自定义配置
自定义配置
新建一个build
文件夹,里面新建一个webpack.config.js
const path = require('path');
module.exports = {
mode:'development', // 开发模式
entry: path.resolve(__dirname,'../src/main.js'), // 入口文件
output: {
filename: 'output.js', // 打包后的文件名称
path: path.resolve(__dirname,'../dist') // 打包后的目录
}
}
更改打包命令
{
// ...
"scripts": {
"build": "webpack --config build/webpack.config.js"
},
}
然后执行 npm run build
,会得到如下结果
其中main.js是我们第一次打包遗留的。
js已经打包好了,接下来我们要做的就是将js引入到html文件中
添加js到html文件
我们需要html-webpack-plugin来帮我们完成这件事情
npm i -D html-webpack-plugin
新建一个与build
同级的文件夹public
,里面新建一个index.html
配置如下
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode:'development', // 开发模式
entry: path.resolve(__dirname,'../src/main.js'), // 入口文件
output: {
filename: '[name].[hash:8].js', // [name] 指entry属性名字, 默认为main
path: path.resolve(__dirname,'../dist') // 打包后的目录
},
plugins:[
new HtmlWebpackPlugin({
// 选取一个html作为模版,在dist目录下会生成一个相同的html,之后将打包好的js注入到该html文件
template: path.resolve(__dirname,'../public/index.html')
})
]
}
打包成功之后,查看dist目录下的index.html文件是否引用了打包之后的js
多文件如何注入到html
- 多个入口文件,注入到同一个html文件中
这种情形我们只需添加入口就OK了,html-webpack-plugin
插件会自动把所有打包好的js注入到html里
module.exports = {
// ...
entry: {
main: path.resolve(__dirname,'../src/main.js'),
share: path.resolve(__dirname,'../src/share.js')
}
}
- 多个入口文件,根据不同需求注入到不同的html文件
我们可以通过生成多个html-webpack-plugin实例来解决这个问题
module.exports = {
// ...
plugins:[
new HtmlWebpackPlugin({
// 选取一个html作为模版,在dist目录下会生成一个相同的html,之后将打包好的js注入到该html文件
template: path.resolve(__dirname,'../public/index.html'),
filename: 'index.html',
chunks: ['main'] // 配置将哪些文件注入到该html文件,为[]在代表不注入js,若无该属性,默认注入所有js
}),
new HtmlWebpackPlugin({
template: path.resolve(__dirname,'../public/share.html'),
filename: 'share.html',
chunks: ['share']
})
]
}
打包前清空dist目录
相信大家也发现了,dist目录下的文件越来越多,下面我们就来解决这个问题
我们需要clean-webpack-plugin来帮我们完成这件事情
npm i -D clean-webpack-plugin
// 其余配置同上
const {
CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
plugins:[
// ...
new CleanWebpackPlugin()
]
}
经掘友提醒,webpack5有新增清空dist目录的方式,在output增加clean字段,现补充在下面
module.exports = {
// ...
output: {
filename: '[name].[hash:8].js', // [name] 指entry属性名字, 默认为main
path: path.resolve(__dirname,'../dist'), // 打包后的目录
clean: true
},
}
将css以style标签的方式注入到html
我们的入口文件是js,所以我们在入口js中引入我们的css文件
// main.js
import "../static/css/base.css"
import "../static/css/color.scss"
import "../static/css/fontsize.less"
console.log("webpack"