前言: 通过前面的学习,已经知道如何打包js和json文件, 也了解了如何配置打包样式文件的loader 但是之前我们都是手动的创建html,并且手动的引入打包后的js文件,这样会有一定的不便, 因此接下来就一起看看webpack是如何处理html文件的 说明: yarn add html-webpack-plugin -D 在webpack.config.js中配置插件说明 代码如下: // 1. 引入处理html插件, const HtmlWebpackPlugin = require("html-webpack-plugin")const {resolve} = require("path");module.exports = { 通过webpack命令打包 配置代码如下: const HtmlWebpackPlugin = require("html-webpack-plugin")const {resolve} = require("path");module.exports = { <body> 在webpack.config.js的插件html-webpack-plugin中配置html模板 将我们开发的html文件中的内容插入到plugin生成的html文件中 代码如下: const HtmlWebpackPlugin = require("html-webpack-plugin")const {resolve} = require("path");module.exports = { 此时,打包后, 查看dist目录中index.html文件中就拥有了我们开发的内容 下载本地webpack $ yarn add webpack webpack-cli -D 配置脚本命令使用webpack打包说明 在package.json中配置脚本命令 "scripts": { 配置完成以后就可以使用npm run build命令来使用本地webpack了1. 安装使用处理html的插件
1.1 下载插件
1.2 配置插件
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 打包结果说明
// ...
plugins:[
new HtmlWebpackPlugin({
// 配置html打包模板
template:"./src/main.html"
})
]
// ...}2. 将我们自己写html内容插入打包后的html文件
2.1 说明
2.2 在src文件中新建html,并开发内容
<div>Hello World</div></body>2.3 在webpack.config.js配置插件
// ...
plugins:[
new HtmlWebpackPlugin({
// 配置html打包模板
template:"./src/main.html"
})
]
// ...}3. 配置本地webpack
3.1 为什么需要配置本地webpack
3.2 下载配置本地webpack
3.3 配置脚本命令
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},