使用“webpack”中的“externals”从 CDN 加载答案

【问题标题】：using "externals" in "webpack" for loading from CDN使用“webpack”中的“externals”从 CDN 加载
【发布时间】：2018-01-05 09:27:37
【问题描述】：

我是 reactjs 和 webpack 的新手。我想在我的项目中使用 webpack 外部从 CDN 加载一个库，例如 https://webpack.js.org/configuration/externals/#externals 中的示例但它不起作用。你能帮帮我吗？

这是我的 index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="stylesheet" href="https://cdn.cdncode.com/twitter-    bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.cdncode.com/bootstrap-rtl/3.2.0-rc2/css/bootstrap-rtl.min.css"/>
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
</head>
<body class="content_main">
<div id="root"></div>
<script type="text/javascript" src="https://cdn.cdncode.com/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.cdncode.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.cdncode.com/html5shiv/r29/html5.min.js"></script>
<script type="text/javascript" src="https://cdn.cdncode.com/respond.js/1.4.2/respond.min.js"></script>
        </script>
</body>
</html>

这是我的 webpack.config.js

const webpack = require('webpack');
const path = require('path');

module.exports = {
entry: "./src/index.js",
output: {
    path: "/js/",
    publicPath: 'http://jwplayer.k-cdn.net/',
    filename: "bundle.js"
},
module: {
    loaders: [
        {test: /\.js$/, loader: 'babel-loader', query: {presets: ['es2015', 'react']}},
        {test: /\.css$/, loader: 'style-loader!css-loader'},
        {test: /\.(png|svg|jpg|gif)$/, loader: 'file-loader'},
        {test: /\.(woff|woff2|eot|ttf|otf)$/, loader: 'file-loader'}
    ]
},
resolve: {
    extensions: ['.js']
},
externals: {
    jquery: 'jQuery'
}
};

【问题讨论】：

你遇到了什么错误？
我正在使用 import $ from 'jquery';在我的一个组件中，我收到此错误 Module not found: Can't resolve 'jquery' in 'C:\Users\PC-R-Nematollahi\Desktop\livez-react\src\components\channels'

标签： reactjs webpack external

【解决方案1】：

要将JQuery的$函数执行到React中，我做了以下步骤。

1) 从npm 安装JQuery

npm install --save jquery

2）webpack.config.js的变化，删除external，添加plugins

module.exports = {
entry: "./src/index.js",
output: {
    path: "/js/",
    publicPath: 'http://jwplayer.k-cdn.net/',
    filename: "bundle.js"
},
module: {
    loaders: [
        {test: /\.js$/, loader: 'babel-loader', query: {presets: ['es2015', 'react']}},
        {test: /\.css$/, loader: 'style-loader!css-loader'},
        {test: /\.(png|svg|jpg|gif)$/, loader: 'file-loader'},
        {test: /\.(woff|woff2|eot|ttf|otf)$/, loader: 'file-loader'}
    ]
},
resolve: {
    extensions: ['.js']
},
plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
    }),
]
};

现在我们可以在 React 中使用 $

【讨论】：

除了 jQuery，我如何在我的 react 项目中从 cdn 导入任何库作为全局库？一些没有任何 npm 模块或类似的库
看看这个link。我想这会对你有所帮助。