Страницы

Поиск по вопросам

понедельник, 8 июля 2019 г.

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

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


Ответ

Ваши конфиги(те, что вы дали) абсолютно верны.
Давайте разберемся с Вашими скриптами, а именно формулировкой 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)

Комментариев нет:

Отправить комментарий