webpack代碼拆分

唉，最近深入webpack，遇到好多問(wèn)題,還請(qǐng)各路好漢指教。。。。

首先，我們?cè)陂_(kāi)發(fā)一個(gè)npm包，入口文件類(lèi)似這種：

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

這樣做的目的是避免后期，入口文件過(guò)大，想實(shí)施懶加載，后期import {canvas} from xxx，不會(huì)引用到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發(fā)布這個(gè)包。

然后在另一個(gè)項(xiàng)目中B中安裝npm包，并使用import { canvas} from xxx,main.bundle.js可以加載到，
但是它的兩個(gè)子模塊0.bundle.js/1.bundle.js均是404，而且加載的路徑是相對(duì)于B項(xiàng)目，嘗試過(guò)使用publishPath，然而并沒(méi)有用。

謝謝您看完我啰嗦的描述，還是希望您能給點(diǎn)意見(jiàn)和經(jīng)驗(yàn)，謝謝~~

回答

編輯回答

敢試

npm包的按需加載不是這樣做的，你這是工程項(xiàng)目上的按需加載，兩個(gè)不是同一個(gè)概念，也不是同樣的解決手段。

npm包的按需加載，是讓別人使用時(shí)，只加載想要的部分，具體手段可以是導(dǎo)出es模塊，讓使用者通過(guò)tree-shaking實(shí)現(xiàn)，亦或者直接把不同的模塊打包到單獨(dú)的目錄，使用者加載時(shí)，自己去尋找對(duì)應(yīng)的目錄。

而require.ensure 這個(gè)是工程項(xiàng)目上做懶加載時(shí)的方案，是通過(guò)異步chunk實(shí)現(xiàn)的，不是同一個(gè)東西。

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

2018年9月1日 07:07

編輯回答

挽青絲

將你的webpack.config.js中的publicPath做成變量，打包部署時(shí)，根據(jù)你的需要將publicPath設(shè)置為需要的值即可。
例如，打包運(yùn)行的命令為:

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

webpack.config.js寫(xiě)法:

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/' : '/';
    },
  };
};

2018年3月1日 23:41