开课吧全栈架构师第16期2020完结webpack day

ckinclude:include:path.resolve(dirname,优化resolve.modules modules:[path.resolve(dirname,}}优化resolve.alias

aliasalias:"@":path.join(dirname,"./pages"),react:path.resolve("react-dom":)}优化resolve.extensions//公司有//使用

上(减少 <!<!DOCTYPE<html<metacharset="UTF-<metaname="viewport"content="width=device-width,initial-<metahttp- patible" <div<script w 的方式去(如import$from'jquery')，并且希望不会对其进行打包，此时就可以配置externals。wmodule.exports=externals:{//jquery通过script引入之后，全局中即有了jQuery变量'jquery':'jQuery'}}publicPath:}',//指定存放JS文件的CDNcss$$npminstalllessless-loader--save-{test:use:["style-loader","css-loader","less-} npmnpmipostcss-loaderautoprefixer-modulemodule.exports={[overrideBrowserslist:["last2versions",]body{div y:flex;border:1pxredsolid;}}{test:include:path.resolve(dirname,"./src"),use:[{loader:"css-loader",options:{}]如果不做抽取配置，我们的css是直接打包进js里面的，我们希望能单独生成cssnpmnpminstallmini-css-extract-plugin-const tractPlugin=require("mini-css-extract-{test:/\.scss$/,use:[//"style-loader",//不再需要style-loader，用 "css-loader""css-loader"编译"sass-loader"编译]plugins:new filename:"css/[name]_[contenthash:6].css",chunkFilename:"[id].css"]压缩借助optimize-css-assets-wck-npminstallcssnano-npmioptimize-css-assets- ck-plugin-constOptimizeCSSAssetsPlugin=require("optimize-css-assets-newcssProcessorrequire("cssnano"//引入cssnanocssProcessorOptions:ments:{removeAll:true}压缩借助html-wck-ckPlugin({tle:"京东商城 te:"./index.html",filename:"index.html",minify:{压缩HTMLments:true,//移除HTML中的注释collapseWhitespacetrue删除空白符与换行符minifyCSS:true//压缩内联css}developmentvsProductionnpminstallnpminstallck-merge-constconstmerge=constcommonConfig=require(" constdevConfig={}module.exports= ck-dev-server--config ck--config }借助cross-npmnpmicross-env-"test":"cross-envNODE_ENV=testck--configmodule.exports=(env)=>{if(env&&duction){returnreturn}}scripts:"--treeCsstreenpmnpmiglob-allpurify-csspurifycss-ck--save-constPurifyCSS=require('purifycss-w constglob=require('glob-all')清除无用cssPurifyCSS({//要做CSSTreeShakingpath.resolve(dirname,'./src/*.html'),//请注意，我们同样需要对html文件进行treeshakingpath.resolve(dirname,JStreeexportconstaddexportconstadd=(a,b){returna+exportconstminus=(a,b)=>{returna-b;import{add}fromadd(1,optimization:usedExports:true//}//正常对所有模块进行tree或者在数组里面排除不需要treeshakingimportimport_from假如我们引入一个 的工具库，体积为1mb，而我们的业务逻辑代码也有1mb，那么打包出来的体积小会在 基于{splitChunks:chunks:"all所有的chunks{splitChunks:chunks:'async',//对同步initial，异步async，所有的模块有效allminSize:30000,//最小尺寸，当模块大于30kbmaxSize:0,//minChunks:1,//打包生成的chunk文件最少有几个chunk了这个模块maxAsyncRequests:5,//最大异步请求数，默认5maxInitialRequests:ameDelimiternametrue,//打包后的名称，除了布尔值，还可以接收一个函数functioncacheGroups:{//缓存组vendors:test:/[\\/]node_modules[\\/]/,name:"vendor"要缓存的分隔出来的chunk名称priority:-10//缓存组优先级数字越大，优先级越高

chunks:"initial",//必须三选一："initial"|"all"|"async"(test:/react|lodash正则规则验证，如果符合就提取chunk,minSizeminSize:minChunks:{minChunks:priority:-reuseExistingChunk:true//可设置是否重用该}}}}}}Scopeexportdefault o,//importstrfrom o.js的内容和index.js会分////module.exports={{concatenateModules:}npmnpmispeed-measure-ck-plugin-constSpeedMeasurePlugin=require("speed-measure-constsmp=newconstconfig= }module.exports=npmnpminstallyzer-constyzerPlugin= module.exports=merge(baseW ckConfig,{new ]百科 我们在index.js中使用了第库react、react-dom，接下来，我们先对这两个库先进行打包constconstpath=require("path");const{DllPlugin}=require("wmodule.exports={mode:entry:react:["react","react-dom"]//!output:path:path.resolve(dirname,"./dll"),filename:"[name].dll.js",library:plugins:new//manifest.jsonpath:path.join(dirname,"./dll","[name]-//定义打包的公共vendorname:]"dev:dll":"dev:dll":ck--confignpmnpmrunnewmanifest:path.resolve(dirname,"./dll/react-<!DOCTYPE<!DOCTYPE<html<metacharset="UTF-8"<metaname="viewport"content="width=device-width,initial-scale=1.0"/><metahttp- patible"content="ie=edge" <linkhref="css/main_e2bf39.css"<div<scripttype="text/javascript"<scripttype="text/javascript"安装一个依赖npmiadd-asset-html-wck-plugin，它会将我们打包后的dll.js文件注入到我们生成的index.html中.在wck.base.config.js文件中进行更改。newnewfilepath:path.resolve(dirname,'../dll/react.dll.js')//对应的dllnpmnpmrun用HardSourceW ckPlugin，一样的优化效果，但是使用却及其简单constconstckPlugin=require('hard-source-constplugins=[new]行，子进程处理完后再将结果发送给主进程。从而发挥多核CPU电脑的威力。npmi-DvarhappyThreadPool=HappyPack.ThreadPool({size:5//consthappyThreadPool=HappyPack.ThreadPool({size:os.cpus().length//w rules:[{test:/\.jsx?$/,/node_modules/,use:{//一个loader对应一个loader:}]{test:in