process.env.NODE_ENV有误，始终是undefind

[iam2r]

--mode 只能保证 process.env.NODE_ENV在src中的js中获取到值 并不是node环境 所以函数中根据process.env.NODE_ENV来判断资源路径是有问题的 想要在webpack的配置中获取到process.env.NODE_ENV 需要用到"cross-env": "^5.1.3", 并配置 "build": "cross-env NODE_ENV='production' webpack --config build/webpack.prod.config.js --mode production", "dev": "cross-env NODE_ENV='development' webpack-dev-server --open --config build/webpack.dev.config.js --mode development",

这样整个node环境的环境变量才会变

[wlx200510]

这点漏了 我是后来看最新的vue-cli时发现用了一个插件对node的全局变量进行了复写

[iam2r]

用入口的形式打包第三方库 能否优化成第三方库里面如果被加载了才会加入入口呢 比如有多个第三方库依赖axios jquery 我整个项目里确没有一处import或者require jquery 按理说不应该把jquery进行打包。 我目前的方案还是在cacheGroups中
vendors: { test: chunk => ( chunk.resource && /.js$/.test(chunk.resource) && /node_modules/.test(chunk.resource) ), chunks: 'initial', name: 'vendors', },

html模板中chunks中再多加个vendors
其实还是没有特别明白这种方式和您那种动态链接dll的方式在性能上的优缺点是什么
您那种应该是能做到不用每次dev都去重复打包第三方资源库 请问以我这种方式除了每次重复打包第三方资源库外 还有什么坏处呢。

[iam2r]

另外多模板多入口我以前学习了一种方法我觉得挺不错 自动获取html模板名集合 再循环创建htmlWebpackPlungin实例。 const HtmlWebpackPlugins = []; //循环模板构建多个Html及创建对应入口 utils.getFileNameList('./src/page', 'html').forEach(page => { HtmlWebpackPlugins.push(new HtmlWebpackPlugin({//构建多个html template: path.resolve(dirname, ../src/page/${page}.html), title: page, filename: ${page}.html, inject: 'body', chunks: [page, 'vendors', 'styles', 'async-vendors'], // vendor: './vendor/vendor.dll.js', hash: !utils.isDev(),//防止缓存 minify: { removeComments: !utils.isDev(), collapseWhitespace: !utils.isDev(), removeAttributeQuotes: !utils.isDev()//压缩 去掉引号 }, chunksSortMode: 'dependency' })); Entries[page] = path.resolve(dirname, ../src/${page}.js); })

exports.getFileNameList = (path, suffix) => { let fileList = []; let dirList = fs.readdirSync(path); dirList.forEach(item => { if (item.indexOf(suffix) > -1) { fileList.push(item.split('.')[0]); } }); return fileList; };

exports.isDev = ()=>{ return process.env.NODE_ENV === 'development' }

[wlx200510]

关于DLL的优点，是开发过程中每次修改后打包不用重复打包第三方库，提升开发过程中的速度，其实生产环境打包的话，是可以不用DLL打包的，直接打包进common问题也不大，因为只涉及一次打包过程，没必要节省时间，为生产环境打包因为默认启用了treeShaking 也不存在你说的问题了。

[wlx200510]

至于获取多个入口的方法，不是本教程的重点，如果是对webpack配置有足够了解之后，针对自己的项目可以进行更加灵活的改动，而并非直接作出一个完美无缺的框架供大家使用，所以这种多入口的方法可以放在issue中，但不合并到教程中。