Исключить модуль из веб-пакета minification

Мы используем WebPack в одностраничном приложении. Приложение развертывается во многих средах. У нас есть требование, когда приложение должно вызывать конкретную конечную точку в заданной среде.

Чтобы обеспечить адрес конечной точки для данной среды, необходимо иметь модуль среды. Это текущее решение (их много, и это не вопрос). Однако нам нужно исключить config.js из minification, чтобы он мог быть перезаписан как часть процесса развертывания.

Конфигурация config.js выглядит следующим образом:

module.exports = {
    env: {
        endpointUrl: 'http://1.2.3.4',
        authUrl: 'http://5.6.7.8'
    }
};

И ссылается на следующее:

const endpointUrl = config.env.endpointUrl;
const authUrl = config.env.authUrl;

Конфигурация WebPack выглядит следующим образом:

var webpack = require('webpack');

module.exports = {
    entry: {
        main: './src/js/main.jsx',
        login: './src/js/login-main.jsx'
    },
    output: {
        path: __dirname + '/dist',
        filename: '[name].bundle.js'
    },
    devtool: 'source-map',
    module: {
        loaders: [{
            test: /.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            plugins: ['transform-react-jsx'],
            query: {stage: 0}
        }, {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'eslint-loader'
        }]
    },
    plugins: [
        new webpack.ProvidePlugin({
            fetch: 'imports?this=>global!exports?global.fetch!whatwg-fetch'
        }),
        new webpack.DefinePlugin({
            __DEV__: JSON.stringify(JSON.parse(process.env.DEV || false))
        })
    ]
};

До сих пор мы рассмотрели externals и загрузчики модулей но ничего не нашли. Исключение в загрузчике модуля по-прежнему вызывает минимизацию модуля.

Некоторые вопросы, которые мы рассмотрели:

Ответ 1

Webpack externals - хороший способ избежать связывания определенных зависимостей.

Однако нам нужно исключить config.js из minification, чтобы он могут быть перезаписаны как часть процесса развертывания.

Добавление зависимости как внешнего не только исключает ее из мини-кода, но даже не разрешается с помощью webpack.

webpack.config.js

var webpack = require('webpack');

module.exports = {
  entry: {
    index: './src/index.js'
  },
  output: {
    path: './dist',
    filename: 'bundle.js'
  },
  externals: {
    './config': 'config'
  }
};

Добавьте в качестве внешнего путь, требуемый для вашего config.js. В моем простом примере путь соответствует ./config. Свяжите его с глобальной переменной, которая будет содержать ваш объект конфигурации. В моем случае я просто использовал config как имя переменной (см. Ниже config.js).

index.js

const config = require('./config');

const endpointUrl = config.env.endpointUrl;
const authUrl = config.env.authUrl;

console.log(endpointUrl);
console.log(authUrl);

Поскольку вы препятствуете webpack разрешить модуль config.js, тогда он должен быть доступен в среде во время выполнения. Один из способов может заключаться в том, чтобы показать его как переменную config в глобальном контексте.

config.js

window.config = {
  env: {
    endpointUrl: 'http://1.2.3.4',
    authUrl: 'http://5.6.7.8'
  }
};

Затем вы можете загрузить определенный файл config.js для любой заданной среды.

index.html

<!DOCTYPE html>
<html>
<head>
  <title>Webpack</title>
</head>
<body>
  <script type="text/javascript" src="config.js"></script>
  <script type="text/javascript" src="dist/bundle.js"></script>
</body>
</html>

Ответ 2

Я думаю, uglify-loader может сделать трюк. Это дает вам больший контроль над результатом минимизации, чем то, что вы получаете из коробки.