webpack 没有按需打包

问题描述

在打包过程中，我们所希望的肯定都是按需打包，要不然我们最终出来的目录将会很大。
看这段代码

let api
if (process.env.IS_WX_MINI) {
  api = require('./index.mp').default
  console.log(`api:${api}`)
  console.log(`api:${JSON.stringify(api)}`)
} else {
  api = MST.default.api
}
console.log(`api:${JSON.stringify(api)}`)
export default api

我们希望在 web 端打包的时候，不会去打包 ./index.mp 目录下的东西。但实际的情况是，并没有做到忽略这个路径。

那么问题出现在哪里？

解决过程

其实在 web 端打包的时候，我们发现 process.env.IS_WX_MINI 值为 undefined，这是因为我们没有在 web 端，webpack 的配置中没有配 IS_WX_MINI 这个参数。

配置 webpack

config = merge(config, {
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"development"',
        IS_WX_MINI: 'false'
      }
    })
  ]
})

这个时候就可以了。查了一下 DefinePlugin 这个插件的使用，发现它确实有这种能力。 如下所示：

参考

webpack DefinePlugin

webpack 中为什么要使用 define Plugin