还没看的可以点击查看前两篇：Webpack最佳实践总结（一）、Webpack最佳实践总结（二）好了，这是第三篇了也是完结篇。我认为这篇文章是最乱的一篇。让我们阅读它。集成的CSS处理流程不会让您失望。有时候，前端项目中除了JavaScript，还有一个更重要的CSS。我们需要投入一些精力。这里主要说说如何将CSS处理流程集成到webpack中，因为CSSModules的情况比较复杂，所以暂不打算多介绍CSSModules。CSS工作流指的是什么？一个好的工作流程可以提高开发效率，节省开发成本。这里要介绍的是CSS工作流中一个很常见的代码处理过程：正常的CSS业务逻辑开发过程需要经过CSS预处理器（如Sass或Less），再经过后处理器（如作为PostCSS）深度处理。Sass和Less让我们吃下“语法糖”来快速编写CSS。PostCSS可以让我们不再关心每条语句是否考虑到不同、不同版本的浏览器。在webpack上集成CSS处理流程的实现方法如下：配置预处理器这里使用Sass作为预处理器，如下：//webpack.config.jsconstwebpack=require('webpack');constExtractTextPlugin=require('extract-text-webpack-plugin');module.exports={module:{rules:[//...{test:/\.scss$/,排除:/node_modules/,使用:ExtractTextPlugin.extract({fallback:'style-loader',use:[{loader:'css-loader',options:{minimize:true}},'postcss-loader','sass-loader']})}]}}在此处配置后处理器,PostCSS作为后处理器，如下：//webpack.config.jsconstwebpack=require('webpack');constautoprefixer=require('autoprefixer');module.exports={plugins:[newwebpack.LoaderOptionsPlugin({options:{postcss:[autoprefixer({浏览器:['last3version','ie>=10']})],context:staticSourcePath}})]}设置外部连接//webpack.config.jsconstExtractTextPlugin=require('extract-text-webpack-plugin');//存放静态资源，比如图片或者normalize.cssconststaticSourcePath=path.join(__dirname,'static');module.exports={//...entry:{//设置入口文件，顺序为静态资源->custom.scss->项目中的其他scssbase:path.resolve(staticSourcePath,'src/public/custom.scss')},//...plugins:[//创建一个标签，将src指向最终生成的CSS文件，需要html-webpack-pluginnewExtractTextPlugin({filename:'[name].[contenthash].css',allChunks:true})]}压缩第三方库以Moment.js和Lodash为例Moment.jsMoment.js(v2.18.1)是一个JavaScript库，默认情况下，只有当你将它安装到你的项目中时，即使在缩小后，也会占用217kb的大小。与截至2017年8月1日JavaScript的平均大小446kb相比，这实在是太大了。但是webpack可以去掉Moment.js中无用的代码。其中165kb是本地化语言包，即使您不使用它们也是默认包含的。以下代码来自moment的gitihub//moment/src/lib/locale/locales.jsfunctionloadLocale(name){varoldLocale=null;//TODO:找到一种更好的方法来注册和加载Node中的所有语言环境if(!locales[name]&&(typeofmodule!=='undefined')&&module&&module.exports){;require('./locale/'+名称);//因为defineLocale当前还设置了全局区域设置，我们//想要为延迟加载的区域设置撤消它getSetGlobalLocale(oldLocale);}catch(e){}}returnlocales[name];}上面的代码会让Moment.js在运行时动态选择对应的文件进行加载。要解决它，你需要使用ContextReplacementPlugin，一个替换上下文的插件。示例如下：//webpack.config.jsconstwebpack=require('webpack');module.exports={plugins:[newwebpack.ContextReplacementPlugin(//require处理文件目录的位置/moment[\/\\]locale/,//正则匹配需要包含的文件/(en|zh-cn)\.js/)]};LodashLodash是一个方便开发的JavaScript工具集合，测试版是4.17.4.当你的项目包含Lodash时，打包后的文件至少会增加75kb，额外的大小包含316个Lodash函数。如果您只使用其中的几个，比如20个，则大约有65kb的空闲空间。下面列出了两种去除这些冗余代码的方法：方法一：还记得webpack最佳实践（一）中提到的Tree-shaking吗？正因为如此，我们可以利用这个特性非常方便地进行按需引用，如下：import_from'lodash';_.get();更改为importgetfrom'lodash/get';get();代码量从72kb压缩到8.27kb方法二：方法一只适合刚开始玩一个project，不太适合玩打开的project，除非重写一次，工作量太大，另一个原因是方法lodash的名字很容易和自定义的函数名冲突，造成隐藏的bug。方法二就是解决这两个问题，即使用babel-plugin-lodashbabel-plugin-lodash是一个使用babel将lodash的import用法编译成最佳实践的插件。配置如下：打开.babelrc，添加如下Configuration{"plugins":["lodash"]}更多配置方法可以在文档中找到，这里不再过多介绍。更具体的优化效果见下文：import_from'lodash';_.get({a:{b:5}},'a.b');上面代码没有使用babel-plugin-lodash，使用后会重新编译如下：import_getfrom'lodash/get';_get({a:{b:5}},'a.b');同方法一，代码大小从72kb压缩到8.27kb当然如果你想进一步压缩代码，可以尝试搭配lodash-webpack-plugin，更进一步删除里面的代码一些lodash方法。例如_.get默认支持深度路径查询。如果不需要支持深度路径查询，可以开启这个插件，这个方法会被移除。此支持：仅使用babel-plugin-lodashimport_from'lodash';_.get({a:{b:5}},'a.b');//→返回5import_getfrom'lodash/get'使用babel-plugin-lodash和lodash-webpack-plugin后；_get({a:{b:5}},'a.b');//→返回未定义的代码大小，从72kb压缩到772benablescopehoistingscopehoisting对于webpack来说，就是将之前的模块引用链扁平化为一个，但不影响已有代码。更好理解scopehoisting推荐阅读：这里目前只有webpackv3及以上版本支持scopehoisting，启用需要手动配置，如下：//webpack.config.jsconstwebpack=require('webpack');module.exports={插件：[newwebpack.optimize.ModuleConcatenationPlugin()]};其他有用的插件preload-webpack-plugin允许静态资源支持DNS预解析和预加载，配置如下：//webpack.config.jsconstPreloadWebpackPlugin=require('preload-webpack-plugin');module.exports={//...plugins:[newPreloadWebpackPlugin({rel:'preload',as:'script',include:'all',fileBlacklist:[/\.(css|map)$/,/base?.+/]})]}script-ext-html-webpack-plugin允许js加载方式支持Async或defer，配置如下：//webpack.config.jsconstScriptExtHtmlWebpackPlugin=require('script-ext-html-webpack-plugin');module.exports={//...plugins:[newScriptExtHtmlWebpackPlugin({defaultAttribute:'defer'})]}总结的有点乱，不好总结，大概是集成CSS代码处理过程进webpack，压缩第三方库（Moment.js和Lodash），启用scopehoisting等好用的插件大概就是这样，内容比较多~文章是f首次发表于：https://www.linpx.com/p/webpa...欢迎访问我的博客：https://www.linpx.com
