javascript - 配置 Webpack 使 React 使用多个条目和输出

Question

我正在尝试将服务器配置为具有多个条目和输出。该应用程序使用 Zurb Foundation、jquery 和 React。

我希望jquery和foundation不要成为bundle.js的一部分，并且也有一个单独的react包

Webpack 验证，服务器启动，但没有显示任何内容，并且在控制台中出现:“ReferenceError:webpackJsonp 未定义”

单个条目有效，我不知道尝试使用多个条目时会出现错误。

webpack.config

var webpack = require('webpack');
var path = require('path');
var CommonsChunkPlugin = require('./node_modules/webpack/lib/optimize/CommonsChunkPlugin');

module.exports = {
    entry: {
        main: ['script!jquery/dist/jquery.min.js',
        'script!foundation-sites/dist/foundation.min.js',
        './dist/app.js' ],
        react: ['react', 'react-dom']
    },
     externals: {
        jquery: 'jQuery'
    },
    plugins: [
        new webpack.ProvidePlugin({
            '$': 'jquery',
            'jQuery': 'jquery'
        }),
        new CommonsChunkPlugin('react', 'react.bundle.js')
    ],
    output: {
        filename: bundle.js'
        },

    devServer: {

        inline: true,
        contentBase: './build',
        port: 3000
    },

    module: {
        loaders: [
          {
            loader: 'babel-loader',
            query: {
              presets: ['react', 'es2015']
            },
            test: /\.js?$/,
            exclude: /(node_modules)/
          }
        ]
    }
};

package.json

{
  "name": "boilerplate",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server",
    "test": "karma start"
  },
  "author": "CBM",
  "license": "MIT",
  "dependencies": {
    "react": "^15.3.2",
    "react-dom": "^15.3.2"
  },
  "devDependencies": {
    "babel-core": "^6.16.0",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "css-loader": "^0.25.0",
    "foundation-sites": "^6.2.3",
    "jquery": "^3.1.1",
    "karma": "^1.3.0",
    "karma-firefox-launcher": "^1.0.0",
    "karma-mocha": "^1.2.0",
    "karma-mocha-reporter": "^2.2.0",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^1.8.0",
    "mocha": "^3.1.0",
    "react-router": "^2.8.1",
    "script-loader": "^0.7.0",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.16.1"
  }
}

babel.rc

{
    "presets": ["es2015", "react"]
}

Answer 1

指定每个条目的输出:

entry: {
    jquery: ['script!jquery/dist/jquery.min.js', 'script!foundation-sites/dist/foundation.min.js' ],
    bundle: './dist/app.js',
    react: ['react', 'react-dom']
},
output: {
    filename: '[name].js'
}

如果您想将 jquery 和基础库直接添加到 html 中，则无需添加条目。 字体:https://webpack.github.io/docs/multiple-entry-points.html