Question

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

我做了什么

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

我的期望

根据路径生成动态导入的块文件

版本

“react”：“^ 16.0.0”
“react-dom”：“^ 16.0.0”
“react-router”：“^ 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

制作块文件

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

一切看起来都很完美，减去了动态导入webpack，这在webpack 2+中是不需要的。我的猜测是你偶然在其他地方导入了这个组件，因此没有创建包：）

Webpack＆amp;未生成React动态导入块文件

1 个答案: