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中，但不合并到教程中。