webpack4.0入门学习笔记(二)
作者:互联网
html-webpack-plugin
的使用
安装
npm i html-webpack-plugin -D
在webpack4.0入门学习笔记(一)中,我们是自己在打包目录下创建index.html对打包后js文件进行引用。
html-webpack-plugin
插件可以根据对应的模板在打包的过程中自动生成index.html,并且能够对打包的文件自动引入。
在webpack.config.js
的plugins
中配置如下
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports={
entry: {
main: './src/index.js'
},
//打包完成后文件存放位置配置
output: {
filename: 'bundle.js',
path: path.resolve(__dirname,'dist')
},
plugins: [
new htmlWebpackPlugin({
template: './index.html'
})
]
}
在终端执行npm run start
,打包完成后在dist
目录下自动生成index.html文件,并且还自动引入所有文件。
clean-webpack-plugin
的使用
每次打包生成的dist目录,如果改一次代码,都得要删除一次dist目录,这样很麻烦,可以通过clean-webpack-plugin
在每次打包的时候自动清空dist目录。
安装
npm i clean-webpack-plugin -D
在webpack.config.js
的plugins
中配置如下
const path = require('path')
const htmlWebpackPlugin = require('html-webpack-plugin')
const cleanWebpackPlugin = require('clean-webpack-plugin')
module.exports={
entry: {
main: './src/index.js'
},
//打包完成后文件存放位置配置
output: {
filename: 'bundle.js',
path: path.resolve(__dirname,'dist')
},
plugins: [
new htmlWebpackPlugin({
template: './index.html'
}),
new cleanWebpackPlugin()
]
}
标签:index,入门,plugin,笔记,js,webpack,html,webpack4.0,path 来源: https://www.cnblogs.com/qfstudy/p/10747454.html