Webpack не импортирует пакеты из node_modules (только для js)

Question

Доброе утро,

Я довольно новичок в 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

и вот мой конфиг веб-пакета:

// 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 из библиотек отлично работает в отличие.

Кто-нибудь знает, как это исправить, или может помочь мне понять, что происходит?

Answer 1

Если вы намеревались рассматривать jquery как внешнее, ответ @Pandelis прав (обратите внимание на верхний регистр Q: jquery: jQuery). Но если вы хотите импортировать jquery как модуль узла, см. Ниже.

Использовать jQuery в качестве модуля узла

Если вы хотите использовать jQuery в качестве модуля узла и его связать, вам следует установить jquery из npm

npm install jquery

Затем импортируйте его в свой код

import $ from "jquery";

Не нужно ничего добавлять к webpack.config.js. Но если вы хотите использовать jQuery как внешний:

Использовать JQuery в качестве внешнего

Когда вы делаете что-то подобное в webpack.config.js:

...
module.exports = {
  externals: {
    jquery: "jQuery" // or jquery: "$"
  },
  ...
}

В веб-пакете указывается, что в строке import jquery, jquery не должно связываться; вместо этого ищите объект jQuery в глобальной области видимости (в нашем случае window). И 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' все равно будет работать.

Надеюсь, это поможет!

Answer 2

На самом деле не уверен на 100%, не рассматривая больше проекта, но попробуй.

Установите внешний JQuery для:

"jquery": "jQuery"

и используйте jquery в своем проекте как: import jQuery from 'jquery' или import $ from 'jquery'