如何让动态导入在 webpack 4 中工作答案

【问题标题】：How to get dynamic imports to work in webpack 4如何让动态导入在 webpack 4 中工作
【发布时间】：2018-12-01 06:46:21
【问题描述】：

我正在尝试将我的应用迁移到 webpack 4。我的头已经很痛了。

动态导入 - 这是我的代码拆分方法（逐页）。但我无法让它工作。使用以下软件包设置了非常简单的测试器：

"devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-plugin-transform-async-to-generator": "^6.24.1",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.11",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.4.0",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "webpack": "^4.12.0",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4"
  }

这是我的主要测试应用：

import React from "react";
import ReactDOM from "react-dom";
import style from "./main.css";
import pageLoader from './pageLoader';

class App extends React.Component {
    render() {
    let page = pageLoader();  
  return (
    <div>
      <p>React here!</p>
      {page}
    </div>
  );
}
};

export default App;
ReactDOM.render(<App />, document.getElementById("app"));

我想用单独的包动态加载我的页面。

import React from "react";
import ReactDOM from "react-dom";
import style from "./main.css";

const Page1 = () => {
  return (
    <div>
      <p>Page1 here!</p>
    </div>
  );
};
export default Page1;

到目前为止，这是我的 webpack.config：

const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  entry: {
    polyfill: 'babel-polyfill',
    app: './src/index.js'
  },
    output: {
        filename: '[name].bundle.js',
        chunkFilename: '[name].bundle.js', //name of non-entry chunk files
        path: path.resolve(__dirname, 'dist')
    },

    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
            options: { minimize: true }
          }
        ]
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"]
      },

        ]
    },

    plugins: [
    new HtmlWebPackPlugin({
        template: "./src/index.html",
        filename: "./index.html"
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    })
    ]
};

现在这是构建时出错的部分。这是调用动态导入的函数：

function pageLoader() {
    return import(/* webpackChunkName: "page1" */ './Page1')
    .then(page => {
    return page.default;
    });

}

export default pageLoader;

我在构建时收到此错误：

ERROR in ./src/test/pageLoader.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: Unexpected token (2:8)

  1 | function pageLoader() {
> 2 |   return import(/* webpackChunkName: "page1" */ './Page1')
    |          ^
  3 |   .then(page => {
  4 |     return page;
  5 |   });

我读过的所有内容都表明这是设置它的方法。我做错了什么？

【问题讨论】：

我解决了。我的 .babelrc 文件中需要“babel-plugin-syntax-dynamic-import”。你把它放在这样的地方：“syntax-dynamic-import”。现在它起作用了。有趣，没有一个教程告诉我这个。
已经安装了这个插件，还是不行。虽然它适用于 webpack@3。

标签： javascript webpack babel-loader

【解决方案1】：

对于那些走这条路的人来说只是一个更新：如果你正在使用 React，我会推荐 react-loadable，这使得在每个组件的基础上进行动态导入变得非常容易......很多大公司都在使用它.

【讨论】：

【解决方案2】：

我遇到了同样的问题，解决方法是：

npm install --save-dev @babel/plugin-syntax-dynamic-import

将以下行添加到 .babelrc

"plugins": ["@babel/plugin-syntax-dynamic-import"],

来源：

【讨论】：