2

我正在使用 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"
                }
            }
        }
    },

新的配置代码从项目中使用的节点模块中获取所有代码。但我只希望拆分供应商库（我在进入配置部分定义）。不是来自 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）我需要拆分运行时代码吗？

4

2 回答 2

2

我实际上问了非常相似的问题。

以下是仅为所需包创建供应商捆绑包的方法：

// 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运行时块将自动生成。

于 2018-04-09T16:07:52.063 回答
0

你不需要在 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请看一下。

于 2018-06-25T14:50:54.030 回答