вот мой 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)
Комментариев нет:
Отправить комментарий