爲React配置webpack以使用多個條目和輸出

我試圖將服務器配置爲具有多個條目和輸出。該應用程序正在使用Zurb基金會，jquery和React。爲React配置webpack以使用多個條目和輸出

我想jQuery和基礎不能是bundle.js的一部分，也有一個單獨的包以反應

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

來源

2016-10-01 user3541631

指定輸出對於每個條目：

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

來源

2016-10-01 14:26:23 OriolBG

爲React配置webpack以使用多個條目和輸出

回答

相關問題