Webpack的基本配置和打包与介绍（二） (2)

用官网的话说就是plugin目的在于解决loader无法实现的其他事

这里只简述了plugin的功能 具体的源码和解析可以在这里看到 官网传送门 3.2 plugin的简单用法

在之前的例子中我们的index.html是我们自己手动创建的，而在我们vue脚手架打包的时候会自己生成一个index.html 所以我们是不是也可以通过配置来获得这个便利呢？

答案是可以的，使用HtmlWebpackPlugin插件，打包的时候就可以自动生成

在终端输入命令安装插件

npm install --save-dev html-webpack-plugin

在package.json中可以看到多了个这项

我们在webpack.config.js中修改配置

const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: { index: './src/foo.js', }, output: { path: path.join(__dirname, 'dist'), filename: 'index.js', }, mode: 'production', // 配置rules是展示 loader 的一种简明方式 module: { rules: [ { test: /\.css$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' } ]} ] }, plugins: [ new HtmlWebpackPlugin()//配置自动生成html的插件 ], }

删除之前在dist创建的index.html

改好配置文件后我们继续打包一下npm run build

此时我们会发现在dist目录下自动生成了index.html，运行一下

3.3 plugin总结

plugin的用法有很多，由于插件可以携带参数/选项，你必须在webpack配置中，向plugins属性传入一个new实例，取决于你的webpack用法对应有多种使用插件的方式。

更详细的开发文档可以查看官网的传送门。

4. 总结

以上就是loader和plugin的最最基本的使用，也是我在学习的时候参考各路大神总结的。

用转转的一句话说就是因为plugin和loader是对外开放的设计，所以保证了webpack拥有持续的灵活性。