webpack常用插件配置记录

github仓库：https://github.com/llcMite/webpack.git

1）html-webpack-plugin    （用于模板生成html，自动引入output文件）

cnpm install html-webpack-plugin --save-dev

const HtmlWebpackPlugin = require('html-webpack-plugin');
plugins:[
       new HtmlWebpackPlugin({
         title: 'reactTest',
         filename:'index.html',
         template:'./index.html'   //模板路径
       })
 
]

2）clean-webpack-plugin  （用于清理output出来的文件）

cnpm install clean-webpack-plugin --save-dev

plugins:[
       new CleanWebpackPlugin(['dist']),    //这里我output是dist文件夹，所以清理的dist
]

3）webpack.optimize.CommonsChunkPlugin   （分离第三方库,这里我用的是react）

var path=require('path');
var webpack=require('webpack');
 
module.exports={
    //入口
    entry:{
        index:'./index.js',
        vendor:['react','react-dom']
    },
    //输出
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'[name].[hash].js',
    },
    module:{
          ...
    },
    plugins:[
       new webpack.optimize.CommonsChunkPlugin({
            names: ["vendor", "manifest"]
       })
    ]
}

4）optimize-css-assets-webpack-plugin   uglifyjs-webpack-plugin   （压缩css及js）

cnpm install uglifyjs-webpack-plugin optimize-css-assets-webpack-plugin --save-dev

const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
 
plugins:[
       // 1、压缩CSS
        new OptimizeCSSPlugin({
            cssProcessorOptions: {
                safe: true
            }
        }),
        //2、压缩JS
        new UglifyJSPlugin({
            compress: { warnings: false },
            // 是否需要sourcePap
            // sourceMap: true
        }),
]

 5）postcss-loader

cnpm install postcss-loader postcss-import postcss-cssnext --save-dev

配置一个postcss.config.js

module.exports = {
    plugins: {
        // css 内可以使用 @import 其他CSS文件
        'postcss-import': {},
        // CSS内可以使用 css3+ 新语法(autoprefixer已经内置到postcss-cssnext)
        'postcss-cssnext': {
            browsers: ['last 2 versions', '> 5%']
        }
    }
  }

配置webpack.config.js

loaders: [
        ...
            {
              test: /\.css$/,
              use: ['style-loader','css-loader', { loader: 'postcss-loader', options: { sourceMap: true } }]
            },
            {
                test: /\.less$/,
                use:['style-loader', 'css-loader','less-loader', { loader: 'postcss-loader', options: { sourceMap: true } } ]
            },
],