服务器plugin文件夹,webpack插件Plugins

webpack 有着丰富的插件接口(rich plugin interface)。webpack 自身的多数功能都使用这个插件接口。这个插件接口使 webpack 变得极其灵活。

webpack.config.js中配置plugins，plugins是一个数组

1、为每个 chunk 文件头部添加 bannernew webpack.BannerPlugin('输出的文件头部添加注释信息')

new webpack.BannerPlugin('millet Creation Time : '+ new Date()),

2、html-webpack-plugin简单创建 HTML 文件，用于服务器访问

这个插件用来简化创建服务于 webpack bundle 的 HTML 文件，尤其是对于在文件名中包含了 hash 值，而这个值在每次编译的时候都发生变化的情况。你既可以让这个插件来帮助你自动生成 HTML 文件，也可以使用 lodash 模板加载生成的 bundles，或者自己加载这些 bundles。需要让webpack.config.js认识这个插件，首先require这个插件，在webpack.config.js下面的plugins下写new这个插件,npm install --save-dev html-webpack-plugin

plugins:[

new HtmlWebpackPlugin({

title:'标题', //设置title的名字，在html模板的header上加

filename:'home.html',//设置这个html的文件名

template:'homeTpl.html',//要使用的模块的路径

inject:'body',//把模板注入到哪个标签后

favicon:'',//给html添加一个favicon

minify:true,//是否压缩

hash:true,//是否hash化

cache:false,//是否缓存

showErrors:false,//是否显示错误

"chunks": {"head": {

"entry":"assets/head_bundle.js",//设置title的名字

"css": ["main.css"]//设置title的名字

},

xhtml:false//是否自动闭合标签

}})

]

3、ExtractTextWebpackPlugin  从 bundle 中提取文本(CSS)到单独的文件

webpack的css－loader,CSS和您的JavaScript打包在一起，将无法利用浏览器的异步和并行加载CSS的能力。这样，您的网页必须等待，直到您的整个JavaScript 包下载完成，然后重绘网页。可以通过使用ExtractTextWebpackPlugin分别打包CSS来帮助解决这个问题。npm i --save-dev extract-text-webpack-plugin@beta

4、增强 uglifyPlugin webpack-uglify-parallel

uglifyJS凭借基于node开发，压缩比例高，当webpack build进度走到80%前后时，会发生很长一段时间的停滞，经测试对比发现这一过程正是uglfiyJS在对我们的output中的bunlde部分进行压缩耗时过长导致，webpack-uglify-parallel的是实现原理是采用了多核并行压缩的方式来提升我们的压缩速度。

原来webpack中自带的uglifyPlugin配置：newwebpack.optimize.UglifyJsPlugin({

exclude:/\.min\.js$/,

mangle:true,

compress: {warnings:false},

output: {comments:false}

})

修改成

//os 是node模块 os.cpu()*****cpu信息*******

const os =require('os');

os.cpus().length,const os =require('os');

const UglifyJsParallelPlugin =require('webpack-uglify-parallel');

newUglifyJsParallelPlugin({

workers: os.cpus().length,

mangle:true,

compressor: {

warnings:false,

drop_console:true,

drop_debugger:true

} })

5、clean-webpack-plugin 清除dist文件夹中重复的文件npm install --save-dev clean-webpack-pluginnewCleanWebpackPlugin(

['js/*.js','css/main/*.min.css'],//匹配删除的文件

{

root:staticFile,//静态文件

verbose:true,//开启在控制台输出信息

dry:false//启用删除文件

}),

6、autoprefixer自动补全css3前缀npm install --save-dev autoprefixerconst autoprefixer = require('autoprefixer');//自动补全css3前缀

{

test:/\.(less|css)$/,

use:ExtractTextPlugin.extract({

use:[

{

loader:'css-loader',

options:{

modules:true,

importLoaders:1,

localIdentName:'[local]',//配置生成的标识符(ident)

}

},

{

loader:'less-loader',

},

{

loader:'postcss-loader',

// 在这里进行配置，也可以在postcss.config.js中进行配置，详情参考https://github.com/postcss/postcss-loader

options: {

plugins:function() {

return[

require('autoprefixer')

];

}

}

}

],

fallback:'style-loader',

}),

、