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
Post a Comment