webpack常用插件

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