reactjs - 如何将 node_modules/regenerator-runtime/runtime.js 添加到 webpack 中捆绑

Question

我尝试按照 this 在 React 应用程序中使用 async/await :

目前，我正在运行webpack --config webpack.dev.config.js --watch --progress

我不明白以下内容

add node_modules/regenerator-runtime/runtime.js to bundle

使用 webpack 时如何将 runtime.js 添加到 bundle ？

当前.babelrc

{
  "presets": [
    ["es2015"],
    "stage-2",
    "react",
    "react-boilerplate"
  ]
}

package.json

{
  "name": "my proj",
  "version": "0.1.0",
  "description": "desc",
  "main": "app/scripts/index.js",
  "scripts": {
    "clean": "rimraf public/dist",
    "watch": "webpack --config webpack.dev.config.js --watch --progress",
    "dev": "webpack --config webpack.dev.config.js --progress",
    "prod": "cross-env npm run clean && webpack --progress --profile --colors",
    "lint": "eslint ./app/**/**.js"
  },
  "author": "me",
  "license": "MIT",
  "dependencies": {
    "axios": "^0.16.2",
    "babel-preset-env": "^1.7.0",
    "cross-env": "^5.0.1",
    "history": "^4.7.2",
    "immutable": "^3.8.1",
    "moment": "^2.19.1",
    "query-string": "^5.0.0",
    "react": "^15.6.1",
    "react-addons-css-transition-group": "^15.6.0",
    "react-dom": "^15.6.1",
    "react-fastclick": "^3.0.2",
    "react-redux": "^5.0.5",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.1.2",
    "react-transition-group": "^2.3.1",
    "redux": "^3.7.2",
    "regenerator": "^0.13.2"
  },
  "devDependencies": {
    "babel-cli": "6.24.1",
    "babel-core": "6.25.0",
    "babel-eslint": "7.2.3",
    "babel-loader": "7.1.1",
    "babel-preset-es2015": "6.24.1",
    "babel-preset-react": "6.24.1",
    "babel-preset-react-boilerplate": "1.1.1",
    "babel-preset-react-hmre": "1.1.1",
    "babel-preset-stage-2": "6.24.1",
    "copy-webpack-plugin": "4.0.1",
    "css-loader": "0.28.4",
    "eslint": "3.19.0",
    "eslint-config-airbnb": "15.0.2",
    "eslint-loader": "1.8.0",
    "eslint-plugin-import": "2.7.0",
    "eslint-plugin-jsx-a11y": "5.1.0",
    "eslint-plugin-react": "7.1.0",
    "extract-text-webpack-plugin": "3.0.0",
    "file-loader": "0.11.2",
    "html-webpack-plugin": "2.29.0",
    "mocha": "3.4.2",
    "node-sass": "4.5.3",
    "open-browser-webpack-plugin": "0.0.5",
    "postcss-loader": "2.0.6",
    "react-addons-test-utils": "15.6.0",
    "rimraf": "2.6.1",
    "sass-loader": "6.0.6",
    "style-loader": "0.18.2",
    "url-loader": "0.5.8",
    "webpack": "3.1.0"
  }
}

webpack 开发配置

const { resolve } = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const version = Date.now();

const config = {
  entry: [
    './scripts/index.js',
    './styles/main.scss',
  ],

  context: resolve(__dirname, 'resources/assets'),

  output: {
    filename: 'app.js',
    path: resolve(__dirname, 'public/dist'),
    publicPath: '',
  },

  plugins: [
    new webpack.optimize.ModuleConcatenationPlugin(),
    new webpack.LoaderOptionsPlugin({
      minimize: false,
      debug: false,
    }),
    new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify('dev') } }),
    new ExtractTextPlugin({ filename: 'app.css?v='+version, disable: false, allChunks: true }),
    new CopyWebpackPlugin([
      { from: './fonts/**/*', to: resolve(__dirname, 'public/dist/[name].[ext]') },
      { from: './images/**/*', to: resolve(__dirname, 'public/dist/[name].[ext]') }
    ]),
  ],

  module: {
    loaders: [
      {
        test: /\.js?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
      {
        test: /\.scss$/,
        exclude: /node_modules/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader?-url!sass-loader'
        }),
      },
      { test: /\.(png|jpg|gif)$/, use: 'url-loader?limit=15000' },
      { test: /\.eot(\?v=\d+.\d+.\d+)?$/, use: 'file-loader' },
      // { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=100000' },
      { test: /\.[ot]tf(\?v=\d+.\d+.\d+)?$/, use: 'url-loader?limit=10000&mimetype=application/octet-stream' },
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader?limit=10000&mimetype=image/svg+xml' },
      { test: /\.pdf$/, use: 'file-loader' },
    ]
  },
  resolve: {
    alias: {
      root: resolve(__dirname, './resources/assets/scripts'),
      components: resolve(__dirname, './resources/assets/scripts/components'),
      containers: resolve(__dirname, './resources/assets/scripts/containers'),
      actions: resolve(__dirname, './resources/assets/scripts/actions'),
      services: resolve(__dirname, './resources/assets/scripts/services'),
    }
  },
};

module.exports = config;

Answer 1

转到您的webpack.dev.config.js并查找条目:[]。只需在其中添加您的 runtime.js 文件即可。就像下面这样

    entry: [
        'node_modules/regenerator-runtime/runtime.js',
        './scripts/index.js',
        './styles/main.scss'
    ]