четверг, 23 марта 2017 г.

Webpack + RequireJS Plugins loader

Webpack loader polyfill for RequireJS "text" loader module.

Сборка через Webpack файлов, загружаемых с помощью плагинов для RequireJS имеющих пути вида require("plugin-name!path/to/file").

Рассмотрим сборку проекта на примере загрузки файлов с помощью плагина "text".

Папку "text-loader" с кодом плагина загрузчика для Webpack необходимо поместить в папку "node_modules".

/node_module/text-loader/index.js

Код файла "index.js"

module.exports = function (content) {
    this.cacheable && this.cacheable();
    this.value = content;
    return "module.exports = " + JSON.stringify(content);
}

В файле "webpack.config.js" необходимо добавить следующие строки для использования загрузчика "text-loader"
...
...
resolveLoader: {
    alias: {
        "text": "text-loader"
    }
},
...
...
resolve: {
    extensions: ['', '.webpack.js', '.web.js', '.js', '.ts', '.tsx'],
    alias: {
              ...
              ...
              template: path.resolve(__dirname, './source/template.html'),
              ...
              ...
          }
}
...

Пример кода javascript-файла, загружающего модуль "template.html" внутри себя

define(function (require) {
    var template = require('text!template');
    console.log(template);
});

Пример кода файла "template.html"

<h1>Hello</h1>

Пример кода плагина загрузчика JS-кода для Webpack.

/node_module/js-loader/index.js

module.exports = function (content) {
    this.cacheable && this.cacheable();
    this.value = content;
    return content;
}

В файле "webpack.config.js" необходимо добавить следующие строки для использования загрузчика "js-loader"
...
...
resolveLoader: {
    alias: {
        "js": "js-loader"
    }
},
...
...

Пример кода javascript-файла, загружающего модуль "module.js" внутри себя

define(function (require) {
    var alertOne = require('js!module');
    alertOne();
});

Пример кода файла "module.js"

define(function () {
    return function () {
        alert(1);
    };
});

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

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