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 } } ]

            },

],

巴特西

webpack常用插件配置记录

最新文章

热门文章