reactjs - Webpack loads externals (and I wish it wouldn't) -


i'm starting react project es6 classes (and eslint airbnb config) , need webpack bundle them.

i started react tutorial , tried using const react = require('react'); , const $ = require('jquery');, realized bundle grew 15 kb 700 kb. decided include jquery, react , react-dom via <script/> tags.

hash: 082980fb232d17977e55 version: webpack 1.13.0 time: 869ms     asset     size  chunks             chunk names bundle.js  13.3 kb       0  [emitted]  app     + 5 hidden modules 

but when remove const react = require('react');, errors in code (e.g. : react must in scope when using jsx - react/react-in-jsx-scope). read docs webpack's externals, , tried doing :

module.exports = {   entry: {     app: './main.js',   },   output: {     filename: 'bundle.js',   },   externals: {     jquery: 'jquery',     $: '$',     react: 'react',     reactdom: 'reactdom',     marked: 'marked',   },   module: {     loaders: [       {         test: /\.js$/,         loader: 'babel-loader',       },     ],   }, }; 

but webpack bundles them anyway, whereas read here , here shouldn't.

hash: 6438094053346ce42228 version: webpack 1.13.0 time: 4975ms     asset    size  chunks             chunk names bundle.js  709 kb       0  [emitted]  app     + 172 hidden modules 

what missing?

thanks in advance!

you can bundle dependencies separate bundle using webpack's commonschunkplugin. require dependencies normally.

const webpack = require('webpack'); const pkg = require('./package.json');  const libs = object.keys(pkg.dependencies); // collect dependencies package   module.exports = {   entry: {     app: './main.js',     libs: libs // entry point libs   },   output: {     filename: 'bundle.js',   },   externals: {     jquery: 'jquery',     $: '$',     react: 'react',     reactdom: 'reactdom',     marked: 'marked',   },   module: {     loaders: [       {         test: /\.js$/,         loader: 'babel-loader',       },     ],   },   plugins: [     plugins: [         new webpack.optimize.commonschunkplugin("libs", "libs.js") // bundle libs libs.js     ] }; 

Comments

Popular posts from this blog

Ansible - ERROR! the field 'hosts' is required but was not set -

customize file_field button ruby on rails -

SoapUI on windows 10 - high DPI/4K scaling issue -