reactjs - 未生成 Webpack 和 React 动态导入 block 文件

Question

我正在使用 React@16.0.0 和 webpack@3.1.0 构建仪表板模板并尝试通过动态导入生成 block 文件，但从未生成文件。 :( 我可以渲染导入和渲染的组件，但似乎没有生成文件，也没有动态导入组件。

我做了什么

• 将“syntax-dynamic-import”和“dynamic-import-webpack”设置为 babel 插件
• 将 chunkFilename 添加到 webpack 输出

我所期望的

• 根据路由动态导入生成chunk文件

版本

• “ react ”:“^16.0.0”
• “ react 域”:“^16.0.0”
• “ react 路由器”:“^4.2.0”
• "react-router-dom": "^4.2.2"
• "babel-plugin-dynamic-import-webpack": "^1.0.1"
• "babel-plugin-syntax-dynamic-import": "^6.18.0"
• "webpack": "3.1.0"

这是我的.babelrc

{
  "presets": [
    "react",
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
      }
    }]
  ],
  "plugins": [
    "syntax-dynamic-import",
    "dynamic-import-webpack",
    "transform-export-extensions",
    "transform-class-properties",
    ["transform-runtime", {
      "polyfill": false,
      "regenerator": true
    }],
    ["transform-object-rest-spread", {
      "useBuiltIns": true
    }]
  ]
}

这是 App.jsx，我试图从 Dashboard1

中创建 block 文件

const loadDashboard1 = import(/* webpackChunkName: "dashboard1" */ '../Dashboard1/index.jsx')

const Dashboard1 = (props) => <AsyncComponent lazyLoadComponent={loadDashboard1} props={props} /> 
const Dashboard = () => (
  <div>
    <Switch>
      <Route path="/dashboard/1" component={Dashboard1} /> //*** This should be dynamic imported and make chunk file
      <Route path="/dashboard/2" component={Dashboard2} />
      <Route path="/dashboard/3" component={Dashboard3} />
    </Switch>
  </div>
)


const App = () => (
  <div className={wrapper}>
    <HeaderMain />
    <Route path="/dashboard" component={SidebarLeft} />
    <main className={content}>
      <Switch>
        <Route path="/dashboard" component={Dashboard} />
        <Route path="/" component={HomePage} />
      </Switch>
    </main>
  </div>
)

export default App

这是我的 webpack.config.js。我添加了 chunkFilename

const webpack = require('webpack');
const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
  devtool: 'source-map',
  target: 'web',
  node: {
    __dirname: true,
    fs: 'empty'
  },
  entry: {
    'main': './client/index.js',
    'vendor': ['react', 'react-dom']
  },
  output: {
    path: path.resolve(__dirname, '../public'),
    filename: '[name].[chunkhash].js',
    chunkFilename: '[name].[chunkhash].js',
    publicPath: "/public",
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      }, {
        test: /\.css$/,
        use: [{
          loader: 'style-loader',
        }, {
          loader: 'css-loader',
        }]
      }, {
        test: /\.(scss)?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'style-loader',
          }, {
            loader: 'css-loader',
            options: {
              modules: true,
              localIdentName: '[name]__[local]___[hash:base64:5]',
            }
          }, {
            loader: 'postcss-loader',
            options: {
              config: {
                path: 'postcss.config.js'
              }
            }
          }, {
            loader: 'sass-loader',
          }
        ]
      }
    ]
  },
  plugins: [
    new HTMLWebpackPlugin({
      title: ''
    }),
    new CleanWebpackPlugin([path.resolve(__dirname, '../public')], {
      root: path.resolve(__dirname, '../'),
    })
  ]
};

这里是AsyncComponent。

import React from 'react'

class AsyncComponent extends React.Component {

  state = {
    Component: null,
    isLoaded: false,
  }

  async componentWillMount() {
    const module = await this.props.lazyLoadComponent
    this.setState({
      Component: module.default ,
      isLoaded: true,
    })
  }

  render() {
    const { Component } = this.state
    return (
      <div>{this.state.isLoaded ? <Component /> : this.props.loader}</div>
    )
  }
}


export default AsyncComponent

这是webpack出来的结果

   main.5227b4d762a52f00aeb2.js     262 kB       0  [emitted]  [big]  main
    vendor.478de73b0c92dd129de6.js     116 kB       1  [emitted]         vendor
  main.5227b4d762a52f00aeb2.js.map    1.53 MB       0  [emitted]         main
vendor.478de73b0c92dd129de6.js.map     420 kB       1  [emitted]         vendor
                        index.html  297 bytes          [emitted]

如果您有解决此问题的任何想法或需要更多信息，请告诉我。

谢谢!

Answer 1

一切看起来都很完美，除了 dynamic-import-webpack，它在 webpack 2+ 中不需要。我的猜测是您不小心将这个组件导入了其他地方，所以没有创建包 :)