前言:
通过前面的学习,已经知道如何打包js和json文件,
也了解了如何配置打包样式文件的loader
但是之前我们都是手动的创建html,并且手动的引入打包后的js文件,这样会有一定的不便,
因此接下来就一起看看webpack是如何处理html文件的
1. 安装使用处理html的插件
说明:
-
webpack打包html文件资源,不是使用loader而是使用插件 - 使用
html-webpack-plugin插件自动生成html文件
1.1 下载插件
yarn add html-webpack-plugin -D
1.2 配置插件
在webpack.config.js中配置插件说明
- 引入下载好的插件
- 在
plugins中配置插件
代码如下:
// 1\. 引入处理html插件,
const HtmlWebpackPlugin = require("html-webpack-plugin")
const {resolve} = require("path");
module.exports = {
entry: "./src/main.js",
output:{
filename:"bundle.js",
path: resolve(__dirname,"dist")
},
module: {
rules:[
{
test: /\.css$/,
use:["style-loader","css-loader"]
}
]
},
// 配置插件
plugins:[
// 配置 处理html插件
new HtmlWebpackPlugin()
],
mode:"development"
}
1.3 打包结果说明
通过webpack命令打包
- 会发现打包后的
index.html是一个空的html文件 ,没有其他结构内容 - 因为插件
html-webpack-plugin是自动创建一个新的html文件,并自动引入bundle.js - 因此我们自己开发的
index.html内容并没有处理到打包后的html文件中
配置代码如下:
const HtmlWebpackPlugin = require("html-webpack-plugin")
const {resolve} = require("path");
module.exports = {
// ...
plugins:[
new HtmlWebpackPlugin({
// 配置html打包模板
template:"./src/main.html"
})
]
// ...
}
2. 将我们自己写html内容插入打包后的html文件
2.1 说明
-
src文件夹使我们开发文件夹,因此我们可能会在这个文件夹中开发html文件内容 - 但是
html-webpack-plugin会在打包的dist目录中生成新的html文件, - 新生成的文件中,不包含我们开发的
html文件内容 - 如果我们需要将自己开发的
html内容也插入到打包后的html文件中,就需要配置
2.2 在src文件中新建html,并开发内容
<body>
<div>Hello World</div>
</body>
2.3 在webpack.config.js配置插件
在webpack.config.js的插件html-webpack-plugin中配置html模板
将我们开发的html文件中的内容插入到plugin生成的html文件中
代码如下:
const HtmlWebpackPlugin = require("html-webpack-plugin")
const {resolve} = require("path");
module.exports = {
// ...
plugins:[
new HtmlWebpackPlugin({
// 配置html打包模板
template:"./src/main.html"
})
]
// ...
}
此时,打包后, 查看dist目录中index.html文件中就拥有了我们开发的内容
3. 配置本地webpack
3.1 为什么需要配置本地webpack
- webpack版本的不同,可能会对项目造成影响
- 项目是多人协同开发,如果每一个人电脑都全局安装不同的webpack,会导致项目配置出问题
- 因此需要配置项目本地webpack,以及配置脚本运行webpack命令
3.2 下载配置本地webpack
下载本地webpack
$ yarn add webpack webpack-cli -D
3.3 配置脚本命令
配置脚本命令使用webpack打包说明
- 在所有的终端里使用webpack命令,默认都是全局安装的
webpack - 项目为了保证统一,需要使用项目本地webpack进行打包
- 脚本中运行的
webpack是使用本地webpack命令
在package.json中配置脚本命令
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
配置完成以后就可以使用npm run build命令来使用本地webpack了
网友评论