该项目地址：https://gitee.com/lxx147258/learn-wepack
前言
在lesson02中，使用了webpack的配置文件进行打包。这篇文章来学习一下通过webpack自动生成html文件，并将打包后的文件插入到html中。
实现步骤
- 初始化项目
D:\learn-webpack\lesson03>npm init -y
- 安装依赖（html-webpack-plugin：生成html的插件，可在npm的官网搜到）
D:\learn-webpack\lesson03>npm i webpack webpack-cli html-webpack-plugin -D
- 新建webpack的配置文件webpack.config.js（该文件名称为默认名称）
// webpack.config.js文件内容
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, 'dist')
},
plugins: [
new HtmlWebpackPlugin()
]
}
- 确保在根目录（我这里是lesson03）下，有配置文件中的入口文件lesson03\src\index.js
// lesson03/src/index.js文件内容
console.log('hello webpack');
- 然后在根目录下执行如下命令：
D:\learn-wepack\lesson03> webpack
- 在根目录中就会生成dist文件夹，其中包含index.html和bundle.js，index.html中就会自动插入打包后的bundle.js，在浏览器中打开index.html，即可看到结果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<script type="text/javascript" src="bundle.js"></script></body>
</html>
猿术.png
网友评论