微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

02-plugins

plugin 可以在webpack运行到某个阶段的时候,帮你做一些事情,类似于生命周期的概念。   在之前我们使用loader的时候,我们打包后还需要自己手动在打包后的文件夹中创建一个index.html文件,并且这个文件中引入打包后的js,非常麻烦,所以就有了下面这个插件。   一、HtmlWebpackPlugin

  使用: 1)在webpack.config.js中引入

 2)设置标题需要在自己的html模板中的title中写入ejs的语法

loader都是放在module对象中的,与module平级的是plugins,放入各种插件,下面是htmlWebpackPlugin插件配置

 

 还有一些相关配置:

二、clean-webpack-plugin  会在每次打包后能把前一次打包生成的目录给删掉

使用:

1) 在webpack.config.js中引入:

2)在plugins中去添加配置

 三、mini-css-extract-plugin   把打包后原来生成的注入到html中的style标签的样式抽出去打包成一个css文件,引入到打包后的html中

安装:npm install --save-dev mini-css-extract-plugin 使用: 1)在配置文件中引入 const MiniCssExtractPlugin = require("mini-css-extract-plugin"); 2)改变module中css的配置,把style-loader替换为 MiniCssExtractPlugin.loader 

3.在plugins中配置:

 运行后:就可以看到不再是原来的各种style标签里去写入样式了,而是外链一个css文件

 

 

 

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐