1、webpack-bundle-analyzer
作用:以树图的方式展示打包后的文件。
用法:
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
plugins: [ new BundleAnalyzerPlugin() ]
更多:https://www.jianshu.com/p/4cdaeaa01fd5
2、html-webpack-plugin
作用:打包后输出html
用法:
const HtmlWebpackPlugin = require('html-webpack-plugin');
plugin:[
new HtmlWebpackPlugin({
title: 'Webpack Study Demo',
filename: 'index.html', //指定生成的HTML文件名
template: path.join(__dirname, '../public/index.html') // 指定模板路径
})
]
3、sass-loader
作用:将sass文件编译成css;
4、postcss-loader
作用:给css3特性添加兼容前缀
5、postcss-cssnext
作用:允许使用CSS的未来特性
6、autoprefixer
作用:postcss-loader需要借助autoprefixer插件来根据浏览器的兼容性为css3的属性添加前缀
7、style-loader
作用:创建style标签,并将模块的导出的样式添加到head标签中,让CSS在页面生效,让样式变成页面中的style标签
使用<style>将css-loader内部样式注入到我们的HTML页面。
style-loader配合css-loader使用,以<style></style>形式在html页面中插入css代码。
style-loader/url: 以link标签形式向html页面中插入代码,采用这种方式需要将css-loader变为file-loader,但这种方式不推荐,因
为如果在一个js文件中引入多个css文件会生成多个link标签,而html每个link标签都会发送一次网络请求,所以这种方式并不建议。
style-loader/useable: 采取这种方式使用处理css,会有use( )和unuse()l两种方法,use()开启引入样式,unuse()不适用样式。
8、css-loader
作用:在js中通过@import加载.css文件