webpack4使用html-webpack-plugin插件的使用
手动创建一些文件夹和文件
用命令初始化
cnpm init -y
安装该练习所用到的依赖
cnpm install webpack webpack-cli html-webpack-plugin -D
目录结构如下
index.js
console.log("index在控制台打印")
print.js
console.log("print在控制台打印")
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
package.json
{
"name": "webpack4-plugin",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config webpack.config.js",
"start": "webpack-dev-server --open"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"html-webpack-plugin": "^3.2.0",
"webpack": "^4.39.2",
"webpack-cli": "^3.3.6"
}
}
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
print: './src/print.js'
},
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'build')
},
devServer:{
port:3000,
contentBase:'./build',
progress:true
},
mode:'development',
plugins: [
new HtmlWebpackPlugin({
title: 'webpack4使用plugin', // 生成的HTML文件的标题
template: path.resolve(__dirname, 'index.html') // 使用的模板路径
})
]
}
如果用webpack-dev-server运行，则会自动打开浏览器，文件正常运行，但是并没有打包生成的文件。原因是webpack-dev-server主要调试用，生成的文件是在内存内，想要实际文件需要webpack编译才可以。
用webpack编译
就打包生成了对应的文件夹及文件
build/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript" src="app.bundle.js"></script>
<script type="text/javascript" src="print.bundle.js"></script>
</body>
</html>
手动打开打包生成build下的index.html控制台也能正常且完整的打印出来
