webpack的文章太多了，不如一起从头写个配置？3秒可以打包一个three.js项目吗？真的，后面会提供源文件地址。要打包的项目如下所示。从头开始安装和使用three.js就省略了。第一个是最基本的。我们需要安装cross-env目前最流行的运行跨平台设置和使用环境变量的脚本需要3个最基本的文件：webpack基础配置文件，暂命名为webpack.base.jswebpack开发配置文件，暂命名为webpack.dev.jswebpack打包配置文件，暂命名为webpack.prod.js当然，dev或prod中的配置需要与基本配置合并并安装webpack-merge。然后配置最熟悉的脚本运行环节。使用--config对配置文件进行基准测试，通过cross-env设置环境变量"dev"："cross-envNODE_ENV=devwebpack-dev-server--configscript/webpack.dev.js","build":"cross-envNODE_ENV=prodwebpack--configscript/webpack.prod.js"好了，前期准备就OK了，开始配置链接。开始配置首先是webpack的入口和出口。export设置为dist链接，简单直接上传代码。{entry:'./src/index.js',output:{filename:'[name].[hash:8].js',path:rootResolve('dist'),publicPath:'/'},}by配置别名的方式。还是可以直接上传代码),}}然后是重点链接：loader和关于loader的插件：样式中使用less需要通过less-loader解析less因为webpack只能理解js解析，然后通过postcss-loader添加浏览器前缀再通过css-解析cssloader代码中的url和@import语法最终通过MiniCssExtractPlugin.loader生成.css文件。JS文件使用babel-loader。关于babel的文章太多了。暂时使用HappyPack进行优化加速。为什么不选择线程加载器？（因为名字不好听--！都怪我）其他文件用url-loader。然后加载器配置是这样的NODE_ENV==='dev',//热更新//publicPath:'../',}},'css-loader','postcss-loader','less-loader']},{test:/\.m?js$/,exclude:/(node_modules|bower_components)/,loader:'happypack/loader',选项:{id:'babel',}},{test:/\.(png|jpe?g|gif)(\?.*)?$/,使用:[{loader:'url-loader',options:{limit:8192,name:'assets/img/[hash:8].[ext]'}}]}关于插件部分，首先是配合上面loader相关的插件：HappyPack和MiniCssExtractPluginnewMiniCssExtractPlugin({filename:"css/[name].[hash:8].css",//csspath}),newHappyPack({id:'babel',loaders:[{loader:'babel-loader',options:{presets:['@babel/preset-env'],cacheDirectory:true}}]})当然想知道运行打包Progress:ProgressPlugin，顺便弄个DefinePlugin，工程必备插件。最后，webpack生成后的代码注入不能缺少HtmlWebpackPlugin，那么基础文件的插件结构是这样的plugins：NODE_ENV),//当前环境VERSION:JSON.stringify('0.1.0'),}),newMiniCssExtractPlugin({filename:"css/[name].[hash:8].css",//css路径//chunkFilename:"[id].css",}),newHappyPack({id:'babel',loaders:[{loader:'babel-loader',options:{presets:['@babel/preset-env'],cacheDirectory:true}}]}),newHtmlWebpackPlugin({template:'./src/index.html'})]开发环境配置首先开发环境api代理必不可少。然后就是devServer.proxy，顺便定义一下开发环境的端口号。devServer:{contentBase:path.join(__dirname,"dist"),compress:true,port:3333}目前没有太多东西，我们在merge下配置一个HotModuleReplacementPluginmerge(base,{mode:'development',plugins:[],devServer:{contentBase:rootResolve("src"),compress:true,port:3333},plugins:[newwebpack.HotModuleReplacementPlugin()]})packagingenvironment打包环境主要是做这些事情来打包优化分类文件以去除冗余。首先是dll定义dll配置文件。例如：webpack.dll.config.js需要定义要打包的库和打包后的导出名称生成的dll模块的详细要点文件manifest.dll.json，那么webpack.dll.config.js的内容应该像这样{//你要打包的模块数组entry:{vendor:['three']},output:{filename:'[name].dll.js',path:distResolve('dll'),//打包后的文件输出Thelocationoflibrary:'[name]_library'//这里需要和webpack.DllPlugin中的`name:'[name]_library',`保持一致。},plugins:[newwebpack.DllPlugin({name:'[name]_library',path:distResolve('dll/manifest.dll.json'),context:__dirname})]}把dll模块通过DllReferencePlugin+json文件详细点告诉webpack在prod文件中添加插件newwebpack.DllReferencePlugin({context:__dirname,manifest:require(distResolve('./dll/manifest.dll.json'))})addscriptrunconfiguration"dll"：“webpack--configscript/webpack.dll.config.js”，运行npmrundll，在dist/dll目录下生成dll相关文件，则dll配置也完成。顺便做一些清洁工作，使用CleanWebpackPluginnewCleanWebpackPlugin({cleanOnceBeforeBuildPatterns:['assets','js','css','index.html','*.js','!manifest.dll.json','!vendor.dll.js'//不要删除dll文件],})然后代码优化，其实mode:'production'时已经做了很多代码优化相关的事情。（我无所谓，我只是想优化--！）我们来做js优化的并行压缩：{minimizer:[newTerserWebpackPlugin({parallel:true,//启用并行压缩cache:true,//启用缓存}),newOptimizeCssAssetsPlugin({//压缩csscssProcessorOptions:{safe:true}})],runtimeChunk:true,//自动拆分运行时文件splitChunks:{chunks:'async',minSize:30000,automaticNameDelimiter:'~',automaticNameMaxLength:30,cacheGroups:{defaultVendors:{test:/[\\/]node_modules[\\/]/,priority:-10},default:{minChunks:2,priority:-20,reuseExistingChunk:true}}},}哎呀，配置js输出的打包路径即可：{//JS路径path:distResolve(),filename:'js/[id].[chunkhash].js',chunkFilename:'js/[name].[chunkhash].js'}，最后合并基础配置。是在开发中吗...省略了。至此，Webpack的大部分配置已经完成，运行npmrunbuild打包代码，1,2,3.3秒打包完成。为什么只需要3秒？虽然上面的配置确实做了很多优化，但是大部分的东西都是被表象迷惑了，原因在下一章看。最终源码地址https://github.com/zhongmeizhi/three-demo更多实用项目：https://github.com/zhongmeizhi/z-ui逐字逐句写的文章，原创不易，给个大拇指向上。欢迎关注公众号《前端进阶教程》，认真学习前端，共同进步。
