Question

我是reactjs和webpack的新手。我想使用webpack external在我的项目中从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'
}
};

Answer 1

要将$的{{1}}功能执行到JQuery，我执行了以下步骤。

1）从React

安装JQuery

npm

2）npm install --save jquery中的更改，删除webpack.config.js，添加external

plugins

现在我们可以在React中使用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", }), ] };

使用＆＃34; externals＆＃34; in＆＃34; webpack＆＃34;从CDN加载

1 个答案: