webpack最佳入门实践系列(03)
3.插件
在前端迅速发展的今天,许多没有太多技术含量并且感觉是在浪费时间的事情,就可以交给构建工具来做,例如:我们去手动创建index.html,手动引入打包好的js文件等操作,都可以叫个webpack来做,帮助我们提升效率,因此,你只需要理解,插件其实就是webpack的一些扩展功能,旨在帮助我们提示效率的工具
3.1.html-webpack-plugin插件
这个插件就是帮我们自动生成html文件并且自动引入打包好的js文件
1.插件安装
npm install html-webpack-plugin --save-dev
2.修改webpack配置,让插件生效
const path = require('path') // 引入插件 const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'app.js' }, plugins: [ //添加插件 new HtmlWebpackPlugin() ] }
3.运行查看效果
npm run dev
4.其他常用配置项目
const path = require('path') // 引入插件 const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'app.js' }, plugins: [ //添加插件 new HtmlWebpackPlugin( //在这个插件内部,可以指定模版和自定义生成的文件名 { filename: 'main.html', template: 'src/index.html' } ) ] }
有了上面两个配置后,这个插件帮助生成一个main.html,并且是基于template生成的