3

вот мой app.js:

import './scss/style.scss';
import './js/script-1.js';
import './js/script-2.js';
import './css/style-1.css';
import './css/style-2.css';

вот часть кода из конфига:

    {
      test: /\.js$/g,
      exclude: [/node_modules/],
      use: [{
          loader: 'babel-loader',
          options: { presets: ['es2015'] }
      }]
    },{
        test: /\.scss$/,
        use: [{
            loader: "style-loader"
        }, {
            loader: "css-loader"
        }, {
            loader: "sass-loader",
            options: {
                includePaths: [path.resolve(__dirname, "./node_modules/compass-mixins/lib")]
            }
        }]
    },
    {
        test: /\.css$/,
        use: [{
            loader: "style-loader"
        }, {
            loader: "css-loader"
        }]
    }

в итоге у меня подключается только один файл стилей или только один скрипт. Пробовал изменить регулярку на /\.css/g, тогда вообще ничего не заработало. Может можно как-то более правильно сделать? Это важные самописные библиотеки.

2 ответа 2

3

Ваши конфиги(те, что вы дали) абсолютно верны.

Давайте разберемся с Вашими скриптами, а именно формулировкой jquery не работает из комментариев. Видно, наличие скриптов в бандле Вы определяли их работоспособностью. Типичный код webpack точки входа:

import "./1.js";
import "./2.js";

На выходе Вам даст что-то вроде:

(function(module, exports, __webpack_require__) {
   // 1.js

}),
(function(module, exports, __webpack_require__) {
   // 2.js
})

В этом Вы можете убедится сами, открыв бандл. Очевидно, что переменная JQuery так или иначе объявленная внутри 1.js останется видна только там. То есть, в 2.js она уже будет недоступна, с чем Вы и столкнулись.

Почему так сделано за рамками этого вопроса, поэтому попробую дать ответ на вопрос "а что же делать теперь, если я хочу jquery и что-то еще в global scope"

В случае с общедоступными библиотеками, вроде той же самой jquery удобно использовать

new webpack.ProvidePlugin({
      JQuery: 'jquery'// $: "jquery", refer to docs
})

Для такого использования jquery должна быть предварительно установлена как npm пакет.

Для самописных проектов - можно оформить их как npm пакет. Пример простого оформления(надеюсь, никого не смутит, что моего авторства): https://github.com/vpotseluyko/url-get-parser

Или же воспользоваться expose-loader

Пример:

Точка входа:

require("expose-loader?varname!./main.js");

Main.js

module.exports = 'my imp string for global scope';

Где-то в inline script:

console.log(varname); // `my imp string...'(only after webpack script loaded)
7
  • сейчас подробно распишу. Может упустил чего
    – Nikolay
    8 июл 2017 в 16:06
  • один из скриптов это jquery. Получается, что подключая import './js/jquery-3.2.1.min.js'; import './js/script-2.js'; у меня в консоли выводится ошибка, что Jquery не существует. Если я его подключаю отдельной строкой в html, то все работает
    – Nikolay
    8 июл 2017 в 16:11
  • такая же история со стилями. У меня работают стили либо из import './scss/style.scss';, либо import './css/style-1.css';
    – Nikolay
    8 июл 2017 в 16:13
  • все начинает исправно работать только когда подключаю максимум один файл одного типа. То есть я пробовал их все в один собирать и импортить. Так работает. Жаль, что флаги не работают...
    – Nikolay
    8 июл 2017 в 16:22
  • @Nikolay, Вы запутались с областями видимости webpack. Я отредактирую ответ и отпишусь еще раз в комментариях. Если кратко - у каждого подключенного файла webpack(js) локальная область видимости. Для подключения чего-то, что требует глобальную область надо использовать например webpack.providePlugin. 9 июл 2017 в 5:07
-1

спас скринкаст . Нужно просто сделать несколько точек входа

4
  • Хотя по ссылке можно найти ответ на вопрос, лучше указать здесь самое главное, а ссылку приводить в качестве источника. Если страница, на которую ведет ссылка, будет изменена, ответ-ссылка может стать недействительным. - Из очереди проверок
    – Petr Flaks
    8 июл 2017 в 18:00
  • @terron, так он указал: "сделать несколько точек входа".
    – Qwertiy
    8 июл 2017 в 18:19
  • 2
    А скринкаст довольно старый, я бы на него не очень полагался. Webpack с тех пор обновился и многое поменялось.
    – Qwertiy
    8 июл 2017 в 18:22
  • 1
    @Qwertiy, если почитать то, что мне ответили в комментариях, то товарищ запутался не с тем, о чем спрашивает:) и как ему собственно скринкаст и несколько точек входа помогли непонятно 9 июл 2017 в 5:08

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.