Webpack. Не подключаются библиотеки

177
08 ноября 2017, 04:01

Подключаю библиотеки через один файл посредством того что копирую минифицированый код поочередно в один файл а потом подключаю уже только его в index.html. Если это делать прямо то все работает, но когда я начал собирать проект через webpack то начало выдавать ошибки типа (в jQuery):

Uncaught ReferenceError: $ is not defined
at Object.149 (common.js:sourcemap:826)
at __webpack_require__ (common.js:sourcemap:679)
at fn (common.js:sourcemap:89)
at Object.148 (common.js:sourcemap:815)
at __webpack_require__ (common.js:sourcemap:679)
at 1.logLevel (common.js:sourcemap:725)
at common.js:sourcemap:728

Что означает что библиотека не подключилась.

Вот код webpack.config.js:

  const ExtractTextPlugin = require('extract-text-webpack-plugin');
var webpack = require('webpack');
var path = require('path');
module.exports = {
    context: __dirname,
    entry: {
        bundle: "./src/index.jsx",
        common: "./src/js/common.js",
        libs: "./src/js/libs.js",
        main_gmaps: "./src/js/main_gmaps.js"
    },
    output: {
        path: __dirname + '/public',
        filename: "[name].js",
        publicPath: '/public/'
    },
    module: {
        loaders: [
            {
                test: /\.js|.jsx?$/,
                exclude: /(node_modules)/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015']
                }
            },
            {
                test: /\.sass$/,
                loader: ExtractTextPlugin.extract('css-loader!sass-loader?sourceMap')
            },
            {
                test: /\.(png|jpg|jpeg|svg|gif)$/,
                include: [
                    path.resolve(__dirname, './src/img/')  // а тут надо прописать имя папки откуда будет брать все картинки
                ],
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: './public/img/[hash].[ext]', 
                    }
                }]
            }
        ]
    },
    resolve: {
        extensions: ['.js', '.jsx'],
    },
    plugins: [
        new ExtractTextPlugin({ filename: 'app.css', allChunks: true })
    ],
    devServer: {
        historyApiFallback: true,
        contentBase: './'
    }
};

Как исправить эту ошибку. Спасибо!

Answer 1

Как вариант, подключить jquery через webpack.ProvidePlugin

В конфиге в секции plugins надо будет дописать:

plugins: [
    new webpack.ProvidePlugin({
        $ : 'jquery'
    }),
],
READ ALSO
Ошибка в AngularJS. В чем проблема?

Ошибка в AngularJS. В чем проблема?

Подскажите, где я ошибся в данном коде? Почему ng-controller отказывается работать? Спасибо заранее

175
как задать значение свойству через js в asp.net mvc

как задать значение свойству через js в asp.net mvc

Допустим в представление есть 2 числовых поляВ первое мы вводим значение свойству в модели, а второе поле js сам изменяет по какой-то формуле...

187
Сохранение данных в куки

Сохранение данных в куки

Как сохранить имя пользователя в куки из импута

396
Как прописать Access-Control-Allow-Origin в модуле Node.js?

Как прописать Access-Control-Allow-Origin в модуле Node.js?

Друзья, подскажите пожалуйста по следующему вопросу

254