/ / Configure o webpack para o React usar entradas e saídas múltiplas - javascript, jquery, reactjs, webpack, babeljs

Configure o webpack para que o React use entradas e saídas múltiplas - javascript, jquery, reactjs, webpack, babeljs

Eu estou tentando configurar o servidor para ter várias entradas e saídas. O aplicativo está usando Zurb Foundation, jquery e React.

Eu quero que o jquery e a fundação não façam parte do bundle.js e também que tenham um pacote separado para reagir

O Webpack é validado, o servidor é iniciado, mas nada é mostrado e aparece no console: "ReferenceError: webpackJsonp não está definido"

Com uma única entrada está funcionando, eu não sei se é o erro ao tentar usar vários.

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"]
}

Respostas:

1 para resposta № 1

Especifique uma saída para cada entrada:

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"
}

Se você quiser adicionar bibliotecas jquery e foundation diretamente ao html, simplesmente não adicione as entradas. Fonte: https://webpack.github.io/docs/multiple-entry-points.html