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文件