среда, 21 марта 2018 г.

Вынос внешних файлов из сборки Webpack

Файл webpack.config.js

const path = require('path')
        , CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = [
    {
          entry: path.resolve(__dirname, 'src/index.js')
        , output: {
              path: path.resolve(__dirname, 'dist')
            , filename: 'bundle.js'
          }
        , externals: { // Модули, которые надо из итогового файла сборки исключить. Они будут загружаться отдельно.
              './my-module.js': 'a'
            , './lodash.js': '_' // Заменить импорт модуля на имя этой глобальной перемеменной: require('lodash') --> var _ В итоговый файл попадет: {1: function (...) {module.exports = _;}}
            , './jquery.js': '$' // Заменить импорт модуля на имя этой глобальной перемеменной: require('jquery') --> var jQuery В итоговый файл попадет: {1: function (...) {module.exports = jQuery;}}
          }
        , plugins: [
              new CleanWebpackPlugin(['dist'])
          ]
        , bail: true
    }
];

Файл index.js

import a from './my-module.js';
import * as _ from './lodash.js';
import * as $ from './jquery.js';

a();
console.log(_.tail([1, 2, 3]));
console.log($);

Файл my-module.js

export function a () {
    console.log(1);
}

Скомпилированный файл my-module-compiled.js

function a () {
    console.log(1);
}

Файл index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script src="src/my-module-compiled.js"></script>
    <script src="src/lodash.js"></script>
    <script src="src/jquery.js"></script>
    <title>Webpack App</title>
  </head>
  <body>
    <script src="dist/bundle.js"></script>
  </body>
</html>

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

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