멀티플 항목과 출력을 사용하도록 React 용 webpack을 구성하십시오.

Question

서버에 다중 항목과 출력을 설정하려고합니다. 응용 프로그램은 Zurb Foundation, jquery 및 React를 사용하고 있습니다.

은 내가 bundle.js의 일부가되지 JQuery와 및 기초를 원하고 또한,

이 웹팩 유효성을 검증하는 서버가 시작 반응하지만, 아무것도 표시되지 않습니다 콘솔에 표시에 대해 별도의 번들을 가지고 : "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