Question

我在我的reactjs应用程序中使用webpack4进行codesplitting。我使用以下webpack.config.js for reactjs app：

 webpack.config.js file:
     const config = {
         entry: {
             client: APP_DIR + '/index.js',
         },
         output: {
             filename: '[name].bundle.dev.js',
             path: BUILD_DIR,
             publicPath : '/js/',
                 chunkFilename: '[name].[chunkhash].js'
             },
             mode : 'development',
             module: {
                 rules: [
                 {
                     test: /\.(jsx|js)?$/,
                     exclude: /(node_modules\/)/,
                     use: {
                         loader: "babel-loader",
                         options: {
                             presets: ['react', 'es2015','stage-2'], // Transpiles JSX and ES6
                         }
                     }
                 },
                 {
                     test: /\.(css)?$/,
                     use: [
                         'css-loader',
                     ],
                 },
             ],
             },
             plugins: [
                 new webpack.DefinePlugin({
                     'process.env.NODE_ENV': JSON.stringify('development')
                 }),
             };

routes.js文件：

import {HomePage,DetailPage} from './reactcomponents';

export default function() {
    return (
        <Switch>
            <Route exact={true} path = "/" component={HomePage}/>   
            <Route path = {"/([a-zA-Z0-9\-\ ]*)/abc/([a-zA-Z0-9\-\ ]*)-:listingId"} component={DetailPage}/>
        </Switch>
    )
}

运行webpack config后，webpack生成4个文件：

client.bundle.js，
homepage.bundle.js，
detailpage.bundle.js
和供应商~visitpage.bundle.js。

webpack4和
中“vendors~visitpage.bundle.js”文件的用途是什么？为什么“vendors~visitpage.bundle.js”文件正在生成？我缺少任何webpack配置选项吗？

Answer 1

我建议你阅读本页split-chunks-plugin。

您可以看到webpack将根据这些条件自动拆分块：

可以共享新块或者来自node_modules文件夹的模块
新块将大于30kb（在min + gz之前）
按需加载块时的最大并行请求数将低于或等于5
初始页面加载时的最大并行请求数低于或等于3
当试图满足最后两个条件时，更大的块是优选的。

有关详情，请参阅拆分块插件文档

weback4为react组件创建供应商文件

1 个答案: