前文中，我们一直是在dist目录下手动写入一个index.html，其实webpack还支持html文件的打包，这就需要借助html-webpack-plugin。
接下来从0开始一步步创建一个项目，并用webpack打包js、css、html。
1.创建目录
mkdir webpack-demo && cd webpack-demo
2.初始化
npm init -y
3.安装依赖
npm install --save-dev webpack \
webpack-cli \
style-loader \
css-loader \
html-webpack-plugin \
mini-css-extract-plugin
package.json中的依赖如下
"devDependencies": {
"css-loader": "^1.0.0",
"html-webpack-plugin": "^3.2.0",
"mini-css-extract-plugin": "^0.4.2",
"style-loader": "^0.23.0",
"webpack": "^4.19.0",
"webpack-cli": "^3.1.0"
}
4.准备如下结构的代码
.
├── package-lock.json
├── package.json
├── src
│ ├── css
│ │ └── index.css
│ ├── js
│ │ ├── index.js
│ │ └── test.js
│ └── page
│ ├── page1.html
│ └── page2.html
└── webpack.config.js
src/page/page1.html（page2.html内容与page1.html几乎一致，仅为了演示打包多个html文件）
无需在html文件中手动引用js，webpack打包时会自动引用入口配置的所有js，若HtmlWebpackPlugin插件配置chunk选项，可以有选择的指定引用的js。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>page1</title>
</head>
<body>
<!--无需手动引用js，webpack打包时会自动引用入口配置的js-->
<!--<script src="../js/index.js"></script>-->
</body>
</html>
src/css/index.css
body {
color: red;
background: green;
font-size: 20px;
}
src/js/index.js
import './css/index.css'
import {test} from './js/test'
document.body.innerHTML = test()
src/js/test.js
export function test() {
return "test..."
}
5.修改webpack配置文件
webpack.config.js
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: {
index: './src/js/index.js',
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].[hash:8].js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
// {loader: "style-loader"},
MiniCssExtractPlugin.loader,
{loader: "css-loader"}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "css/[name].[hash:8].css",
}),
new HtmlWebpackPlugin(
{
template: './src/page/page1.html', //指定要打包的html路径和文件名
filename:'./page/page1.html' //指定输出路径和文件名
}
),
new HtmlWebpackPlugin(
{
template: './src/page/page2.html',
filename:'./page/page2.html'
}
)
]
};
6.执行webpack命令打包
$ webpack
Hash: e2cb3e0faa6d66b286ea
Version: webpack 4.19.0
Time: 699ms
Built at: 09/16/2018 11:49:01 PM
Asset Size Chunks Chunk Names
css/index.e2cb3e0f.css 48 bytes index [emitted] index
js/index.e2cb3e0f.js 5.15 KiB index [emitted] index
./page/page1.html 287 bytes [emitted]
./page/page2.html 287 bytes [emitted]
Entrypoint index = css/index.e2cb3e0f.css js/index.e2cb3e0f.js
[./src/css/index.css] 39 bytes {index} [built]
[./src/js/index.js] 101 bytes {index} [built]
[./src/js/test.js] 51 bytes {index} [built]
+ 1 hidden module
Child html-webpack-plugin for "page/page1.html":
1 asset
Entrypoint undefined = ./page/page1.html
[./node_modules/html-webpack-plugin/lib/loader.js!./src/page/page1.html] 367 bytes {0} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 509 bytes {0} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 519 bytes {0} [built]
+ 1 hidden module
Child html-webpack-plugin for "page/page2.html":
1 asset
Entrypoint undefined = ./page/page2.html
[./node_modules/html-webpack-plugin/lib/loader.js!./src/page/page2.html] 367 bytes {0} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 509 bytes {0} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 519 bytes {0} [built]
+ 1 hidden module
Child mini-css-extract-plugin node_modules/css-loader/index.js!src/css/index.css:
Entrypoint mini-css-extract-plugin = *
[./node_modules/css-loader/index.js!./src/css/index.css] ./node_modules/css-loader!./src/css/index.css 212 bytes {mini-css-extract-plugin} [built]
+ 1 hidden module
在dist目录下生成如下文件
.
├── dist
│ ├── css
│ │ └── index.e2cb3e0f.css
│ ├── js
│ │ └── index.e2cb3e0f.js
│ └── page
│ ├── page1.html
│ └── page2.html
以上就是一个完整的同时打包html、css、js的示例。
另外，需要特别说明的是，如果webpack配置了多个入口，同时又打包多个html的话，HtmlWebpackPlugin插件必须配置chunk属性，与entry中的key对应，否则每个html文件将会引用所有的入口对应的js。示例如下：
plugins: [
new HtmlWebpackPlugin(
{
template: './src/page/page1.html', //指定要打包的html路径和文件名
filename:'./page/page1.html', //指定输出路径和文件名
hash: true,
chunks: ['index']
}
)
]
网友评论