webpack插件学习

1、css 3 自动补全插件

autoprefixer

• 官方是这样说的：Parse CSS and add vendor prefixes to CSS rules using values from the Can I Use website
  ，也就是说它是一个自动检测兼容性给各个浏览器加个内核前缀的插件。
  举个例子：弹性盒模型 flex 实际代码：

:fullscreen a{
    display:flex
}

插件自动补偿之后就是

a{
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -ms-flexbox; 
    display: flex
}

此时我们可以更加专注css 布局和美化，不需要花过多的精力写相同的css 加不同的前缀，同时也减少了代码的冗余
使用方法：
npm install --save-dev autoprefixer postcss-loader 我已经切换到了淘宝的源，或者可以使用 cnpm

var autoprefixer = require('autoprefixer');
module.exports={ //其他配置这里就不写了
 module:{
     loaders:[ 
                {  
                     test:/\.css$/, //在原有基础上加上一个postcss的loader就可以了 
                      loaders:['style-loader','css-loader','postcss-loader']
               }
      ] 
}, 
postcss:[autoprefixer({browsers:['last 2 versions']})]}

2、提取css样式插件

extract-text-webpack-plugin
官网是这么解释的 Extract text from bundle into a file. ,把额外的数据加到编译好的文件中
使用方法：
npm install --save-dev extract-text-webpack-plugin

var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = { 
    module: {
       loaders: [ 
        { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }
       ]
    }, 
    plugins: [ 
        new HtmlWebpackPlugin({ template: './src/public/index.html', inject: 'body' }), 
        new ExtractTextPlugin("[name].[hash].css") 
    ]
}

3、自动生成html 插件

html-webpack-plugin
npm install html-webpack-plugin --save-dev

//webpack.config.js 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 
module.exports={
         entry:'./index.js', 
         output:{ 
              path:__dirname+'/dist', 
              filename:'bundle.js' 
         },
        plugins:[ new HtmlWebpackPlugin() ] }

• 作用:它会在dist目录下自动生成一个index.html
  其他参数配置：

{ 
  entry: 'index.js',
  output: {
      path: 'dist',
      filename: 'bundle.js'
  }, 
  plugins: [ 
      new HtmlWebpackPlugin({
        title: 'My App',
        filename: 'admin.html', 
        template:'header.html', 
        inject: 'body', 
        favicon:'./images/favico.ico', 
        minify:true, hash:true, 
        cache:false, 
        showErrors:false, 
        "chunks": { 
          "head": { 
            "entry": "assets/head_bundle.js", 
            "css": [ "main.css" ]
          }, 
        xhtml:false 
        }) 
    ]
}

作用：

title: 设置title的名字 
filename: 设置这个html的文件名 
template:要使用的模块的路径 
inject: 把模板注入到哪个标签后 'body', 
favicon: 给html添加一个favicon './images/favico.ico', 
minify:是否压缩 {...} | false 
hash:是否hash化 true false , 
cache:是否缓存, 
showErrors:是否显示错误, 
chunks:目前没太明白 
xhtml:是否自动毕业标签 默认false 

4、全局挂载插件

copy-webpack-plugin

• 官方这样解释 Copy files and directories in webpack ,在webpack中拷贝文件和文件夹
  使用方法：
  npm install --save-dev copy-webpack-plugin

new CopyWebpackPlugin([{
  from:__dirname+'/src/public'
}])

• 作用：把public 里面的内容全部拷贝到编译目录