Webpack 4与代码拆分

Question

我正在使用CommonsChunkplugin拆分我的codes.Now，我正在尝试将我的项目迁移到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"
                }
            }
        }
    },

新的配置代码从项目中使用的节点模块中获取所有代码。但我只希望供应商的库(我在入口配置部分定义的)是split.Not所有来自node_modules的代码。

在本例中：'babel-polyfill'，'react'，'react-dom'，"jquery"，"bootstrap“

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，请看一下。