webpack代码拆分

Question

唉，最近深入webpack，遇到好多问题,还请各路好汉指教。。。。

首先，我们在开发一个npm包，入口文件类似这种：

const canvas= r => require.ensure([], () => r(require('./canvas')), 'canvas')
const util= r => require.ensure([], () => r(require('./util')), 'util')
module.exports = {
    canvas,
    util
}

这样做的目的是避免后期，入口文件过大，想实施懒加载，后期import {canvas} from xxx，不会引用到util。
下面是webpack的配置文件：

const webpack = require('webpack')
const path = require('path')
const moment = require('moment')
console.log(path.resolve(__dirname))

function resolve(dir) {
    return path.join(__dirname, '..', dir)
}

const config = {
    context: resolve('src'),
    entry: '../src/app.js',
    output: {
        path: resolve('dist'),
        filename: '[name].bundle.js',
        libraryTarget:'umd',
        // publicPath: '',
        // chunkFilename: 'module/[name].min.js'
    },
    module: {
        rules: [{
            test: /\.js$/,
            include: resolve('src'),
            use: [{
                loader: 'babel-loader',
                options: {
                    presets: ['env']
                }
            }]
        }]
    }
}

module.exports = config

打包完成后：

npm publish发布这个包。

然后在另一个项目中B中安装npm包，并使用import { canvas} from xxx,main.bundle.js可以加载到，
但是它的两个子模块0.bundle.js/1.bundle.js均是404，而且加载的路径是相对于B项目，尝试过使用publishPath，然而并没有用。

---

谢谢您看完我啰嗦的描述，还是希望您能给点意见和经验，谢谢~~

Answer 1

npm包的按需加载不是这样做的，你这是工程项目上的按需加载，两个不是同一个概念，也不是同样的解决手段。

npm包的按需加载，是让别人使用时，只加载想要的部分，具体手段可以是导出es模块，让使用者通过tree-shaking实现，亦或者 直接把不同的模块 打包到 单独的目录，使用者加载时，自己去寻找对应的目录。

而require.ensure 这个是工程项目上做懒加载时的方案，是通过异步chunk实现的，不是同一个东西。

想要深入了解tree-shaking，可以看我的这篇文章 https://segmentfault.com/a/11...

Answer 2

将你的webpack.config.js中的publicPath做成变量，打包部署时，根据你的需要将publicPath设置为需要的值即可。
例如，打包运行的命令为:

webpack --env production
或者:
NODE_ENV=production webpack

webpack.config.js写法:

module.exports = function(env, args) {
  env = env || process.env.NODE_ENV;

  return {
    entry: {
      app: './src/index.jsx',
    },
    output: {
      filename: SCRIPT_FORMAT,
      chunkFilename: SCRIPT_FORMAT,
      path: path.resolve(__dirname, 'dist'),
      publicPath: env === 'production' ? '/assets/react/' : '/';
    },
  };
};