上一篇文章中，webpack.config.js包含了本地调试和在线发布的所有配置，编译好的bundle.js包含了所有代码。当项目变大，代码量增加，配置增加时，文件的可维护性会越来越差。是时候把它们分开了~环境分离环境分离主要是区分本地环境和生产环境。本地调试需要实时看到代码变化，生产环境需要编译成指定文件。开发环境和生产环境分别定义配置文件有两种方式，在package.json中定义相应指令共享开发环境和生产环境的配置文件，使用参数分别区分环境配置文件定义生产环境编译的开发环境webpack.dev.js和webpack.prod.js的配置文件，然后分别通过npmrunserve和npmrunbuild启动devServer并进行编译操作//package.json"scripts":{"serve":"webpackserve--config./config/webpack.dev.js","build":"webpack--config./config/webpack.prod.js",},参数区分开发环境和生产环境使用webpack.common.js文件，通过在package.json中加入--env参数来区分"scripts":{"serve2":"webpackserve--config./config/webpack.common.js--envdevelopment","build2":"webpack--config./config/webpack.common.js--envproduction"}，在webpack.common.js中，module.exports被定义为一个函数，可以接收env传过来的参数。开发环境和生产环境都需要将使用过的配置提取出来放到一个对象中，将使用过的配置分离成单独的文件，然后通过webpack-merge工具合并配置代码。//webpack.config.jsconst{merge}=require('webpack-merge');constdevConfig=require('./webpack.dev');constprodConfig=require('./webpack.prod');constcommonConfig={...//要使用的常用配置}module.exports=function(env){//赋值后在babel.config.js中可以获取到当前环境process.env.NODE_ENV=env.production？“生产”：“发展”；constconfig=env.production?产品配置：开发配置；返回合并（commonConfig，配置）；}；这样就可以对公共配置部分进行统一管理。代码分离所有源代码编译成一个文件，会导致编译后的文件太大，一次加载所有资源，加载速度慢。从性能的角度来说，希望提高请求速度，需要资源的时候重新加载。这时候可以把源代码按照功能编译成多个文件。代码分离的三种方式Multipleentry：通过entry配置多个entry，手动分离代码防止重复：使用EntryDependencies或splitChunksPlugin去重分离动态导入：通过import函数分离多个entry//webpack.config.js//获取开始目录constdirname=process.cwd();constresolveApp=(folder)=>path.resolve(dirname,folder);module.exports={entry:{index:'./src/index.js',main:'./src/main.js',},output:{filename:'js/[name].js',路径:resolveApp('./dist'),},//...}这样编译后会根据入口生成两个js文件，防止重复。当有公共库时，多个引用可能会导致重复加载问题。EntryDependencies的一种方式是定义entry，将重复的依赖提取出来编译成单独的文件splitChunksPlugin另外可以使用webpack默认集成的splitChunksPlugin，通过splitChunks设置属性。chunks属性有三个值用于定义分离的场景。async，默认只有当代码进行异步操作时，initial才会分离，同步代码才会全部分离，异步和同步才会分离optimization:{chunkIds:'named',//指定命名methodofthefilesplitChunks:{chunks:'all',},},在splitChunks中定义代码分离方式后，将index.js中使用的moment和lodash编译到vendors文件中。splitChunks中还有其他属性，用于指定编译后的文件大小，文件名minSize，默认20000字节，指定拆分包的最小值maxSize，指定大于maxSize大小的包应该拆分成包不小于minSizeminChunks，表示引用的包至少被导入的次数cacheGroup，缓存组，配置具体的编译规则，即使不设置，都有默认值。上面要打包的超长文件名vendors是按照默认设置生成的。webpack官方文档中有介绍，你可以自己定义，比如更改包依赖的文件名。动态导入另一种分离方式是动态导入。当资源被使用时，它们将被下载和解析。以下代码在index.jsimport('./foo');import('./baz');中导入foo.js和baz.js通过import函数动态导入的js被编译成两个独立的文件。动态导入也可以通过魔术注释做一些配置。webpackChunkName自定义编译后的文件名。webpackPrefetch在浏览器空闲时提前下载资源。*//*webpackPreload:true*/'./foo.js').then((result)=>{console.log('fooloaded',result,result.default);});可以看到foo.js第一次是在浏览器空闲的时候下载资源，第二次是从缓存中获取资源。使用prefetch提前下载资源。使用它们的时候，速度会相对快一些，但是这样会给入口文件的渲染增加压力，所以要看实际的使用场景。总结一下，webpack.config.js中使用了module.exports导出功能，通过参数区分编译环境，从而在开发环境和生产环境使用不同的loader、插件和配置来处理资源。拆分代码可以多入口操作，防止重复的splitChunksPlugin，动态引入惰性函数。动态导入异步文件可以设置preloading或者prefetch来提前下载资源。以上就是webpack环境和代码分离的相关介绍。更多关于webpack的内容可以参考我的其他博文，持续更新中~
