Question

我正在使用ES6类（以及带有airbnb配置的ESLint）启动一个React项目，我需要使用webpack捆绑它们。

我从React tutorial开始尝试使用const React = require('react');和const $ = require('jquery');，但我意识到我的捆绑从15 kb增长到700 kb。然后，我决定通过jquery标记添加react，react-dom和<script/>。

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

但是当我删除const React = require('react');时，我的代码中出现错误（例如：当使用JSX时，React必须在范围内 - react / react-in-jsx-scope）。然后，我阅读了一些关于Webpack's externals的文档，并尝试这样做：

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',
      },
    ],
  },
};

但无论如何，Webpack捆绑了它们，而我读了here和here它不应该。

Hash: 6438094053346ce42228
Version: webpack 1.13.0
Time: 4975ms
    Asset    Size  Chunks             Chunk Names
bundle.js  709 kB       0  [emitted]  app
    + 172 hidden modules

我错过了什么？

提前致谢！

Answer 1

您可以使用webpack＆＃39; s CommonsChunkPlugin将所有依赖项捆绑到单独的捆绑包中。通常需要所有依赖项。

const webpack = require('webpack');
const pkg = require('./package.json');

const libs = Object.keys(pkg.dependencies); // collect all dependencies from package 

module.exports = {
  entry: {
    app: './main.js',
    libs: libs // the entry point for the 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 all libs to libs.js
    ]
};

Webpack加载外部（我希望它不会）

1 个答案: