[英]Webpack does not import bundles from node_modules (js only)
早上好,
我對Webpack還是很陌生,感到有點迷茫-從源路徑導入模塊效果很好-但是從node_modules(例如jQuery)導入模塊會給我錯誤消息,提示找不到模塊。 我完全迷路了,甚至不知道要尋找什么或如何進一步調試它。
我收到的錯誤消息是:
external "jquery":1 Uncaught ReferenceError: jquery is not defined
at Object.jquery (external "jquery":1)
at __webpack_require__ (bootstrap:723)
at fn (bootstrap:100)
at Object../js/ManagementApplication.ts (ManagementApplication.ts:5)
at __webpack_require__ (bootstrap:723)
at fn (bootstrap:100)
at Object.0 (dist.js:40457)
at __webpack_require__ (bootstrap:723)
at bootstrap:790
at bootstrap:790
jquery @ external "jquery":1
__webpack_require__ @ bootstrap:723
fn @ bootstrap:100
./js/ManagementApplication.ts @ ManagementApplication.ts:5
__webpack_require__ @ bootstrap:723
fn @ bootstrap:100
0 @ dist.js:40457
__webpack_require__ @ bootstrap:723
(anonymous) @ bootstrap:790
(anonymous) @ bootstrap:790
這是我的webpack配置:
// shared config (dev and prod)
const {resolve} = require('path');
const {CheckerPlugin} = require('awesome-typescript-loader');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require("webpack")
module.exports = {
resolve: {
extensions: ['.ts', '.js'],
},
context: resolve(__dirname, '../src/main/'),
output: {
filename: "dist.js",
path: resolve(__dirname, '../target')
},
externals: {
bootstrap: "bootstrap",
jquery: "jquery"
},
module: {
rules: [
{
test: /\.js$/,
use: ['babel-loader'],
},
{
test: /\.tsx?$/,
use: ['babel-loader', 'awesome-typescript-loader'],
},
{
test: /\.css$/,
use: ['style-loader', {loader: 'css-loader', options: {importLoaders: 1}}],
},
{
test: /\.(scss)$/,
use: [{
loader: 'style-loader', // inject CSS to page
}, {
loader: 'css-loader', // translates CSS into CommonJS modules
}, {
loader: 'postcss-loader', // Run postcss actions
options: {
plugins: function () { // postcss plugins, can be exported to postcss.config.js
return [
require('autoprefixer')
];
}
}
}, {
loader: 'sass-loader' // compiles Sass to CSS
}]
},
{
test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
use: 'url-loader?limit=10000',
},
{
test: /\.hbs/,
loaders: "handlebars-loader"
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loaders: [
'file-loader?hash=sha512&digest=hex&name=img/[hash].[ext]',
'image-webpack-loader?bypassOnDebug&optipng.optimizationLevel=7&gifsicle.interlaced=false',
],
},
],
},
plugins: [
new CheckerPlugin(),
new HtmlWebpackPlugin(),
new webpack.IgnorePlugin(/\/iconv-loader$/)
],
performance: {
hints: false,
},
};
還有這個:
// development config
const merge = require('webpack-merge');
const webpack = require('webpack');
const commonConfig = require('./common');
module.exports = merge(commonConfig, {
mode: 'development',
entry: [
'webpack-dev-server/client?http://localhost:4000',// bundle the client for webpack-dev-server and connect to the provided endpoint
'webpack/hot/only-dev-server', // bundle the client for hot reloading, only- means to only hot reload for successful updates
'./js/ManagementApplication.ts' // the entry point of our app
],
devServer: {
hot: true,
host: "0.0.0.0",
port: "4000"
},
devtool: 'source-map',
plugins: [
new webpack.HotModuleReplacementPlugin(), // enable HMR globally
new webpack.NamedModulesPlugin(), // prints more readable module names in the browser console on HMR updates
],
});
(它們都已加載,后一個覆蓋第一個)。
我已經檢查了十億次庫是否正確位於node_modules中-只是不知道為什么不加載它們。 此問題不僅特定於特定的庫,而且一般來說也適用於所有庫。
相反,從庫中導入CSS資源的效果很好。
有誰知道如何解決此問題,或者可以幫助我了解正在發生的事情?
實際上,如果不看更多項目,就不能100%確定,但可以嘗試一下。
將您的jquery外部設置為:
"jquery": "jQuery"
並在項目中使用jquery,例如: import jQuery from 'jquery'
或import jQuery from 'jquery'
import $ from 'jquery'
如果您希望將jquery
視為外部對象,請使用@Pandelis答案(請注意大寫的Q
: jquery: jQuery
)。 但是如果要將jquery作為節點模塊導入,請參見下文。
如果要使用jQuery作為節點模塊並將其捆綁在一起,則應從npm安裝jquery
npm install jquery
然后將其導入您的代碼中
import $ from "jquery";
無需向webpack.config.js
添加任何webpack.config.js
。 但是,如果您想使用jQuery作為外部對象:
當您在webpack.config.js
:
...
module.exports = {
externals: {
jquery: "jQuery" // or jquery: "$"
},
...
}
它告訴webpack在import jquery
行中,不應捆綁jquery
; 而是在全局范圍(在我們的例子中是window
中查找jQuery
對象。 jQuery
和$
均有效。 這也意味着您必須從外部源加載jquery:
#index.html
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<sript src="bundle.js"></script>
然后在您的代碼中,您可以執行
import 'jquery' // or import $ from 'jquery'
$...
只是為了說明,您也可以執行externals: { foo: 'jQuery' }
並import 'foo'
仍然有效。
希望能幫助到你!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.