Исключить модуль из минификации webpack

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

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

конфиг.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))
        })
    ]
};

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

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

23
bundling-and-minification javascript webpack

2 ответов

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

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

добавление зависимости как внешней не только исключает ее из минимизации, но даже не разрешается webpack.

webpack.конфиг.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).

.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 переменная в глобальном контекст.

конфигурации.js

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

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

.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>
14

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

3