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