如何在生产中的 Webpack 项目中使用来自 CDN 的库

Question

我想在生产环境中使用来自 CDN 的 react.min.js（例如 https://unpkg.com/react@15.3.1/dist/react.min.js）

让 Webpack 将我的 import React from 'react' 语句转换为 const React = window.React 而不是将 node_modules/react 构建到包中的最佳方法是什么？

我一直在用 resolve.alias 这样做：

在index.html中：

<head>
  <script type="text/javascript" src="https://unpkg.com/react@15.3.1/dist/react.min.js"></script>
  <script type="text/javascript" src="/assets/bundle.js"></script>
</head>

在webpack.prod.config.js中：

alias: {
  react$: './getWindowReact',
},

getWindowReact.js:

module.exports = window.React;

注意：在老问题中，我没有意识到使用 NODE_ENV=production 将 React 构建到 Webpack 包中会去掉 propTypes 检查。其中一个答案集中于此。

Answer 1

在您的 webpack 配置中，您可以使用 externals 选项，该选项将从环境中导入模块，而不是尝试正常解析它：

// webpack.config.js
module.exports = {
  externals: {
    'react': 'React'
  }
  ...
};

在此处阅读更多内容： https://webpack.js.org/configuration/externals/

Answer 2

React 代码库中所有仅用于开发的部分，例如 PropType 检查，都受到保护：

if ("production" !== process.env.NODE_ENV) {
  ..
}

要在您自己的构建中从 React 中去除这些内容，在您自己的包中创建与缩小的 React 构建等效的内容，请使用 DefinePlugin 将对 process.env.NODE_ENV 的引用替换为 "production" .

plugins: [
  // ...
  new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify('production')
  }),
  new webpack.optimize.UglifyJsPlugin({
    compressor: {
      warnings: false
    }
  })
  // ...
],

Uglify 的死代码消除将把它全部删除，因为它会检测到用 "production" !== "production" 检查包裹的代码是不可访问的。

Answer 3

我创建了 https://github.com/mastilver/dynamic-cdn-webpack-plugin，它开箱即用

const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const DynamicCDNWebpackPlugin = require('dynamic-cdn-webpack-plugin')

module.exports = {
  entry: './main.js',
  output: {
    path: path.join(__dirname, 'build'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
  plugins: [
    new HTMLWebpackPlugin(),
    new DynamicCDNWebpackPlugin()
  ]
}

将动态添加 unpkg.org url 并在您的包中添加适当的代码以从 global

加载库

如何在生产中的 Webpack 项目中使用来自 CDN 的库

How to use a library from a CDN in a Webpack project in production

production

cdn

webpack

webpack-externals