Open neurotoxinvx opened 7 years ago
mark
mark
mark
mark
如果要对webpack 进行懒加载配置要怎么修改呢?
mark
细看了这篇文章,我只想说一句,技术团队的技术文章可否严谨一点呢。对于vue-cli#2.0 的 webpack 配置分析,你里面的注释解释为什么中英文互杂,另外,我很想知道您写这篇文章是否真的好好研究过这些配置,很多都是模棱两可,举例来说webpack.prod.conf.js
这段配置
// split vendor js into its own file
/* 没有指定输出文件名的文件输出的静态文件名 */
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (module, count) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
}),
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
/* 没有指定输出文件名的文件输出的静态文件名 */
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
chunks: ['vendor']
})
CommonsChunkPlugin
用于生成在入口点之间共享的公共模块(比如jquery,vue)的块并将它们分成独立的包。而为什么要new两次这个插件,这是一个很经典的bug的解决方案,在webpack的一个issues有过深入的讨论https://github.com/webpack/webpack/issues/1315 .----为了将项目中的第三方依赖代码抽离出来,官方文档上推荐使用这个插件,当我们在项目里实际使用之后,发现一旦更改了 app.js 内的代码,vendor.js 的 hash 也会改变,那么下次上线时,用户仍然需要重新下载 vendor.js 与 app.js——这样就失去了缓存的意义了。所以第二次new就是解决这个问题的,请你好好看vue-cli那个英文原注释
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
然而你的解释:
//没有指定输出文件名的文件输出的静态文件名`
这个注释是否有点模棱两可了。
参考资料:
@OYsun 非常感谢您的反馈,稍后我会校验一下修改
mark
mark
请教: 这个打包出来的manifest文件是做什么用的
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
chunks: ['vendor']
})
咨询:
// 拼接 static 文件夹的静态资源路径
var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
// 为静态资源提供响应服务
app.use(staticPath, express.static('./static'))
这段的意思是:跑dev的时候,把对静态资源都映射到了./static路径? 如果是这样的话,那./static路径下为什么是空的,是把静态文件都写到内存里了?
mark
对小白了解不错的文档!
对于只会Ctr C/V 配置文件的来说,普及知识真的太友好!thx!
mark
@etteeee 是的,写进内存中去了
mark this!
config/dev.env.js:
var merge = require('webpack-merge')
var prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"'
})
不懂为什么还要merge,直接?是因为还有其他的参数的原因?
module.exports = {
NODE_ENV: '"development"'
}
@Huahua-Chen
如果在 prod.env.js
里面有额外的环境变量, 如:
module.exports = {
NODE_ENV: '"production"',
SOME_DOMAIN: '"https://www.somedomain.com"'
}
而 dev.env.js
里的 SOME_DOMAIN
变量一致, 使用merge
的好处就是不用再重写同样的环境变量了.
请问我在index.js 中import 引入了sass文件为什么会提示错误This relative module was not found:
vue-cli#2.0 webpack 配置分析
前言
作为 Vue 的使用者我们对于 vue-cli 都很熟悉,但是对它的 webpack 配置我们可能关注甚少,今天我们为大家带来 vue-cli#2.0 的 webpack 配置分析
vue-cli 的简介、安装我们不在这里赘述,对它还不熟悉的同学可以直接访问 vue-cli 查看
目录结构
本篇文章的主要关注点在
build - 编译任务的代码
config - webpack 的配置文件
package.json - 项目的基本信息
入口
从 package.json 中我们可以看到
当我们执行 npm run dev / npm run build 时运行的是 node build/dev-server.js 或 node build/build.js
dev-server.js
让我们先从 build/dev-server.js 入手
webpack.dev.conf.js
刚刚我们在 dev-server.js 中用到了 webpack.dev.conf.js 和 index.js,我们先来看一下 webpack.dev.conf.js
webpack.base.conf.js
我们看到在 webpack.dev.conf.js 中又引入了 webpack.base.conf.js, 它看起来很重要的样子,所以我们只能在下一章来看看 config/index.js 了 (摊手)
config/index.js
终于分析完了 webpack.base.conf.js,来让我们看一下 config/index.js
index.js 中有 dev 和 production 两种环境的配置
至此,我们的 npm run dev 命令就讲解完毕,下面让我们来看一看执行 npm run build 命令时发生了什么 ~
build.js
webpack.prod.conf.js
总结
至此 ~ 我们的 vue-cli#2.0 webpack 配置分析文件就讲解完毕 ~
对于一些插件的详细 options 我们没有进行讲解,感兴趣的同学可以去 npm 商店搜索对应插件查看 options ~