Question

我使用CommonsChunkplugin来分割我的代码。现在我正在尝试将我的项目迁移到webpack 4。

这是旧的配置代码：

entry: {
        main: './src/app.js',
        vendor: ['babel-polyfill','react','react-dom',"jquery","bootstrap"]
},

new webpack.HashedModuleIdsPlugin({
            // Options...
}),
new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor'
}),
new webpack.optimize.CommonsChunkPlugin({
            name: 'manifest'
})

这是webpack 4配置代码：

entry: {
        main: './src/app.js'
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                default: false,
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: "vendor",
                    chunks: "initial"
                }
            }
        }
    },

新的配置代码获取项目中使用的节点模块的所有代码。但是我只希望拆分供应商库（我在enrtry配置部分定义）。不是来自node_modules的所有代码。

在这种情况下： '巴贝尔-填充工具'， '反应'， '反应-DOM'， “jquery的”， “引导”

entry: {
        main: './src/app.js',
        vendor: ['babel-polyfill','react','react-dom',"jquery","bootstrap"]
},

我的其他问题：

2）我是否需要HashedModuleIdsPlugin？

3）我是否需要拆分运行时代码？

Answer 1

我实际上非常问similiar question。

以下是如何仅为所需的包创建供应商包：

// mode: "development || "production",
entry: {
  vendor: ['babel-polyfill', 'react', 'react-dom', 'redux'],
  main: './client.js',
},
output: {
  path: path.join(__dirname, '../dist'),
  filename: '[name].[chunkhash:8].bundle.js',
  chunkFilename: '[name].[chunkhash:8].bundle.js',
  publicPath: '/',
},
optimization: {
  splitChunks: {
    cacheGroups: {
      vendor: {
        chunks: 'initial',
        name: 'vendor',
        test: 'vendor',
        enforce: true
      },
    }
  },
  runtimeChunk: true
}

您不需要HashedModuleIdsPlugin运行时块将自动生成。

Answer 2

您无需在webpack 4代码拆分中执行任何操作。使用动态导入，它将为您效劳。

const initProject = async () => {
  const React = await import('react')
  const ReactDOM = await import('react-dom')
  const { Provider } = await import('react-redux')
  const { ConnectedRouter } = await import('react-router-redux')
  const { store, history } = await import('./redux/configureStore')

  await import('semantic-ui-css/semantic.min.css')
  await import('./replace-semantic.css')
  await import('./i18n')

  const App = await import('./App')

  ReactDOM.render(
    <Provider store={store}>
      <ConnectedRouter history={history}>
        <App.default />
      </ConnectedRouter>
    </Provider>,
    document.getElementById('app'),
  )
}

initProject()

这是我的react-startkit，请看一下。

Webpack 4和代码拆分

2 个答案: