Webpack之plugins

webpack

课程目标

1. 如何使用插件进行打包自动生成html页面
2. plugin插件的作用
3. 在重新打包的时候自动删除dist文件

一、如何使用插件进行打包自动生成html页面

• 先下载插件 npm install html-webpack-plugin -D
• 配置

	在webpack.config.js文件中
	var   HtmlWebpackPlugin = reqiuire('html-webpack-plugin')
	和output同级的地方配置一下
	plugins:[new HtmlWebpackPlugin({
				template:"src/index.html"//打包模版
})]
	从新打包 npm run bundle

HtmlWebpackPlugin的作用

HtmlWebpackPlugin会在打包结束后，自动生成一个html文件，并把打包生成的js自动引入到这个html文件中

二、plugin插件的作用

plugin可以在webpack运行到 某个时刻的时候（在打包结束的时候），帮我们做一些事情（生成index.html页面）。

三、在重新打包的时候自动删除dist文件

• 下载 npm install clean-webpack-plugin -D
• 配置（webpack.config.js中）
• const CleanWebpackPlugin = reqiure(’ clean-webpack-plugin’)
• plugins:[new HtmlWebpackPlugin(
  {
  template:“src/index.html”//打包模版
  }),
  //打包之前运行删除dist文件
  new CleanWebpackPlugin([‘dist’])

]