And*_*ndy 37 production cdn webpack webpack-externals
我想react.min.js在生产中使用CDN(例如https://unpkg.com/react@15.3.1/dist/react.min.js)
让Webpack将我的import React from 'react'语句转换为const React = window.React而不是构建node_modules/react到bundle中的最佳方法是什么？
我一直这样做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;
注意:在旧的问题中,我没有意识到将React构建到Webpack包中NODE_ENV=production会剥离propTypes检查.其中一个答案侧重于此.
fra*_*nky 29
在您的webpack配置中,您可以使用externals从环境导入模块的选项,而不是尝试正常解析它:
// webpack.config.js
module.exports = {
externals: {
'react': 'React'
}
...
};
在这里阅读更多内容:https: //webpack.js.org/configuration/externals/
mas*_*ver 10
我创建了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 ModulesCDNWebpackPlugin()
]
}
将动态添加unpkg.org网址并在您的包中添加适当的代码以从中加载librairies global