Question

我正在创建Chrome扩展程序，我正在使用React和Webpack。

因为这是Chrome扩展程序，所以我可以使用<div id="gatewayInput"> <form method="post"> <input type="text" id="name" name="name" placeholder="Name..."><br><br> <?php include("search.php"); ?> </div> ... ... ... <script src ="../../../jqueryDir/jquery-3.2.1.min.js"></script> <script src ="../../../jqueryDir/jquery-ui.min.js"></script> <script type="text/javascript"> //auto search function $(function() { $( "#name" ).autocomplete({ source: 'search.php' }); });将React和ReactDOM加载到浏览器中，然后再执行我自己的代码。我的理解是：

manifest.json加载的react.js lib显示为全局变量，可通过window.React
可以配置webpack外部，以便React和ReactDOM不会捆绑

以下是我的文件：

webpack.config.js

manifest.json

的manifest.json

module.exports = {

  entry: './index.js',
  output: {
    filename: 'skinny-bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader"
      }
    ]
  },

  externals: {
    react: {
      root: 'React',
      commonjs2: 'react',
      commonjs: 'react',
      amd: 'react'
    },
    'react-dom': {
      root: 'reactDOM'
    }
  }
}

index.js

{
  "manifest_version": 2,
  "name": "Test Application",
  "version": "3.2",
  "description": "testing",
  "short_name": "some test",

  "author": "blah blah",

  "content_scripts": [
     {
       "matches": ["https://www.google.com/*"],
       "js": [
         "react.js",
         "react-dom.js",

         "skinny-bundle.js"
       ],
       "run_at": "document_idle"
     }
   ]
}

HelloGreeting.js

import HelloGreeting from './HelloGreeting'    

ReactDOM.render(
    <HelloGreeting />,
    document.getElementById('cst')
)

这就是我的问题所在。我有一个名为HelloGreeting的简单React组件，如果我保持 // import React from 'react' <----- here is my problem!!! // functional component test const Hello = props => { return ( <div>hello world</div> ) } // class component test class HelloGreeting extends React.Component { constructor(props) { super(props) } render() { return ( <ul> <li><Hello /></li> <li>hello universe</li> </ul> ) } } export default HelloGreeting行，则该组件不起作用。如果我注释掉导入，它实际上是有效的，因为我的猜测是webpack只是忽略它，因为React已在webpack外部定义。如果我保留import语句，我会收到import React from 'react'错误，可能是因为Webpack试图捆绑并弄乱window.React。我做了这个猜测，因为webpack在导入或不导入时发出了什么。

如果我注释掉导入，webpack会发出一个较小的包：

"Uncaught TypeError: Cannot read property 'Component' if undefined"

如果我保留导入，我的webpack会发出更大的数据包：

Hash: 26f1526e2554c828c050
Version: webpack 3.5.5
Time: 80ms
           Asset     Size  Chunks             Chunk Names
skinny-bundle.js  5.75 kB       0  [emitted]  main
   [1] ./HelloGreeting.js 2.5 kB {0} [built]
    + 1 hidden module

我的问题是，我该怎么做才能配置webpack，以便我仍然拥有我的ES6样式导入，但仍然有webpack NOT bundle react.js？

我真的想保留import语句，因为这些组件将在未来的项目中使用，我希望尽可能保持模块化和便携性。

Answer 1

事实证明我的webpack externals过于复杂。

改变自：

externals: {
    react: {
      root: 'React',
      commonjs2: 'react',
      commonjs: 'react',
      amd: 'react'
    },
    'react-dom': {
      root: 'reactDOM'
    }
  }

为：

externals: {
    react: 'React',
    'react-dom': 'ReactDOM'
  },

...解决了我的问题。现在，webpack忽略了我的所有React代码，并使我的包变小。

https://github.com/webpack/webpack/issues/1275帮助了我。

使用Webpack外部并仍然允许ES6样式导入？

1 个答案: