前言你应该熟悉webpack的配置和常用模块。这篇文章会讲一些常用的webpack插件及其使用方法。目录1.内置插件名称参数说明用法DefinePluginObject编译时配置的全局常量，在开发模式和发布模式构建中允许不同行为非常有用DefinePluginHotModuleReplacementPlugin-热更新模块打包错误时的文件NamedModulesPlugin-显示模块相对路径ProvidePlugin-自动加载模块ProvidePluginPrefetchPlugincontext：目录的绝对路径，request：模块路径预加载模块请求2.其他插件名称参数说明用法CopyWebpackPluginArray复制文件夹或文件到指定目录CopyWebpackPluginHtmlWebpackPlugin-生成htmlin编译后的目录，并将打包好的js文件插入脚本标签HtmlWebpackPluginExtractTextPlugin-将打包文件中的文本提取到文件中ExtractTextPluginOptimizeCSSPlugin-优化压缩的css文件OptimizeCSSPluginUglifyJsPlugin-压缩JavaScript文件real-timereloading)功能WebpackDevServerWebpackHotMiddleware将webpack处理后的文件发送到服务器webpackHotMiddleware用法介绍DefinePlugin如果值为字符串，将作为代码片段使用。如果该值不是字符串，它将被转换为字符串（包括函数）。如果值是一个对象，它的所有键都将以相同的方式定义。如果在key前面加上typeof，就会定义为typeof调用。newwebpack.DefinePlugin({PRODUCTION:JSON.stringify(true),VERSION:JSON.stringify('5fa3b9'),BROWSER_SUPPORTS_HTML5:true,TWO:'1+1','typeofwindow':JSON.stringify('object'),'process.env.NODE_ENV':JSON.stringify(process.env.NODE_ENV)});console.log('RunningAppversion'+VERSION);if(!BROWSER_SUPPORTS_HTML5)require('html5shiv');自动提供插件无需到处导入或要求即可加载模块。每当标识符被视为未分配的变量时，模块将被自动加载，标识符将被分配模块导出的值。（或由模块的属性导出的内容分配，以支持命名导出）。newwebpack.ProvidePlugin({identifier:'module1',//...});newwebpack.ProvidePlugin({identifier:['module1','property1'],//...});对于ES2015模块默认导出，您必须指定模块的默认属性。CopyWebpackPlugin复制文件夹或文件到指定目录constCopyPlugin=require('copy-webpack-plugin');module.exports={plugins:[newCopyPlugin([{from:'source',to:'dest'},{from:'other',to:'public',ignore:['*.js'],flatten:false,//只复制文件。当文件夹和文件同名时使用},]),],};https://webpack.docschina.org/plugins/copy-webpack-plugin/#ignore查看更多HtmlWebpackPlugin这个插件会为你生成一个HTML文件，包括使用script标签导入webpack打包的js。如果你有多个webpack入口点，它们都将在生成的HTML文件中的脚本标签内。如果您在webpack的输出中有任何CSS资产（例如，使用MiniCssExtractPlugin提取CSS），那么这些将包含在HTML头部的标记中。newHtmlWebpackPlugin({title:'WebpackApp'//用于生成HTML文档的标题默认为WebpackAppfilename:'index.html',//编写HTML模板的默认index.html文件：'index.html',//webpack模板的相对或绝对路径。默认src/index.ejs//template:path.resolve(__dirname,'../index.ejs'),inject:true,//true||'头'||'身体'||false打包的js导入位置body/headfavicon:String,meta:Object,base:Object|String|false,showErrors:Boolean,//将其错误信息写入页面}),ExtractTextPlugin将打包文件中的文本提取到一个文件，通常使用Forextractingcss//webpack4module:{rules:[{test:/.css$/,use:ExtractTextPlugin.extract({fallback:"style-loader",use:"css-loader",publicPath:"/dist"})}]}plugins:[newExtractTextPlugin({filename:"bundle.css",disable:false,allChunks:true})]OptimizeCSSPluginnewOptimizeCssAssetsPlugin({assetNameRegExp:/\.optimize\.css$/g,cssProcessor:require('cssnano'),cssProcessorPluginOptions:{preset:['default',{discardComments:{removeAll:true}}],},canPrint:true})UglifyJsPluginnewUglifyJsPlugin({uglifyOptions:{compress:{warnings:false}},sourceMap:true,parallel:true}),WebpackDevServer提供了一个简单的web服务器，并且有一个livereloading（实时重载）功能module.exports={devServer:{contentBase:'./dist'}};查看详细配置WebpackHotMiddlewareconstexpress=require('express');constwebpack=require('webpack');constwebpackDevMiddleware=require('webpack-dev-middleware');constapp=express();constconfig=require('./webpack.config.js');constcompiler=webpack(config);//告诉express使用webpack-dev-middleware,//并使用webpack.config.js配置文件作为基础配置app.use(webpackDevMiddleware(compiler,{publicPath:config.output.publicPath}));//将文件提供给端口3000app.listen(3000,function(){console.log('Exampleapplisteningonport3000!\n');});也可以配置devServerconstWebpackDevServer=require('webpack-dev-server')constcompiler=webpack(webpack.conf)hotMiddleware=webpackHotMiddleware(compiler,{log:false,//pathheartbeat:2500})constserver=newWebpackDevServer(compiler,{contentBase:path.join(__dirname,'../'),quiet:true,before(app,ctx){app.use(hotMiddleware)ctx.middleware.waitUntilValid(()=>{})}})server.listen(3000)
