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