vue-cli#2.0 webpack 配置分析 about ddfe-blog

[OYsun]

细看了这篇文章，我只想说一句，技术团队的技术文章可否严谨一点呢。对于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有过深入的讨论webpack/webpack#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

然而你的解释：

//没有指定输出文件名的文件输出的静态文件名`

这个注释是否有点模棱两可了。

参考资料：

• webpack/webpack#1315
• https://sebastianblade.com/using-webpack-to-achieve-long-term-cache/
• https://doc.webpack-china.org/guides/code-splitting-libraries/#manifest-
• https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
• https://cnodejs.org/topic/58396960c71e606e36aed1db
• lmk123/blog#47

[lhcy81]

mark

[HouJushang]

mark

[xiaoxintiaoda]

mark

[NameLi]

mark

[ysfi]

mark

[liyanlong]

@Huahua-Chen

如果在 prod.env.js 里面有额外的环境变量, 如:

module.exports = {
  NODE_ENV: '"production"',
  SOME_DOMAIN: '"https://www.somedomain.com"'
}

而 dev.env.js 里的 SOME_DOMAIN变量一致, 使用merge的好处就是不用再重写同样的环境变量了.

[sherfruit]

如果要对ｗｅｂｐａｃｋ　进行懒加载配置要怎么修改呢？

[neurotoxinvx]

@OYsun 非常感谢您的反馈，稍后我会校验一下修改

[fishdong1107]

mark

[ChenJiaH]

mark

[lfyfly]

请教： 这个打包出来的manifest文件是做什么用的

new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      chunks: ['vendor']
    })

[plains]

@lfyfly https://doc.webpack-china.org/guides/code-splitting-libraries/#manifest-

[etteeee]

咨询：

// 拼接 static 文件夹的静态资源路径
var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
// 为静态资源提供响应服务
app.use(staticPath, express.static('./static'))

这段的意思是：跑dev的时候，把对静态资源都映射到了./static路径？
如果是这样的话，那./static路径下为什么是空的，是把静态文件都写到内存里了？

[Maplesog]

mark

[LG-GreatWall]

对小白了解不错的文档！

[Corbusier]

对于只会Ctr C/V 配置文件的来说，普及知识真的太友好！thx！

[lin559]

mark

[kaneruan]

@etteeee 是的，写进内存中去了

[ganksolo]

mark this!

[mino01x]

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"'
}

[chaoming007]

请问我在index.js 中import 引入了sass文件为什么会提示错误This relative module was not found: