找一个文件夹目录
在终端输入
npm init
根据提示操作 就会生成一个package.json
将webpack引入进来
npm install webpack webpack-cli --save-dev
项目目录中也会生成对应的包
然后我们在终端引入
npm install html-webpack-plugin --save
引入html-webpack-plugin第三方插件 这也是我们生成HTML的关键、
在项目根目录中创建文件夹src
在src中创建index.html
index.html参考代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id = "text"></div>
</body>
</html>
在src下新建output.js
output.js参考代码如下
const output = () => {
console.log("output成功执行");
document.getElementById("text").innerHTML = "output成功执行";
}
export default output
在src下新建index.js
index.js参考代码如下
import output from "./output"
window.onload = function() {
output();
}
在项目根目录中创建webpack.config.js
webpack.config.js参考代码如下
//通过node获取到当前文件的位置
const path = require('path')
//导入刚引入的第三方插件html-webpack-plugin
const HtmlWebpackPplugin = require('html-webpack-plugin')
module.exports = {
//设置当前入口文件
entry: './src/index.js',
//出口配置
output: {
//打包的文件名
filename: 'bundle.js',
//生成的文件位置
path: path.resolve(__dirname, './distribution')
},
mode: 'none',
//webpack插件配置
plugins: [
//实例化html-webpack-plugin插件功能
new HtmlWebpackPplugin({
//html-webpack-plugin参数配置
//指定打包HTML文件参照的模板HTML
template: './src/index.html',
//生成的html文件名称
filename: 'app.html',
//定义打包的js文件引入在新html的哪个标签里
inject: 'head'
})
]
}
打开package.json 在scripts下加入"build": “webpack”
然后我们在终端中执行
npm run build
可以看到我们配置的东西都已经生成出来了
app.html的运行效果也和我们的预期一模一样