как в webpack считывать все import'ы?

350
10 июля 2017, 19:18

вот мой 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, тогда вообще ничего не заработало. Может можно как-то более правильно сделать? Это важные самописные библиотеки.

Answer 1

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

Давайте разберемся с Вашими скриптами, а именно формулировкой 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)
Answer 2

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

READ ALSO
Как распарсить экранированный json?

Как распарсить экранированный json?

Помогите пожалуйста распарсить json

352
Пишет Uncaught TypeError: Cannot read property 'user' of undefined

Пишет Uncaught TypeError: Cannot read property 'user' of undefined

Браузер при запуске проекта выдает ошибку:

405
Как получить значения полей в модальном окне?

Как получить значения полей в модальном окне?

Использую библиотеку для диалоговых окон SweetAlert2 https://limontegithub

290
Что означает запись “!0”

Что означает запись “!0”

Увидел запись в чужом js коде, и наткнулся на такой синтаксис, который мне не понятен

354