Проблема с веб-пакетом vue.js: невозможно добавить плагин в vue.config.js с помощью configureWebpack - PullRequest
Новая
       7

Проблема с веб-пакетом vue.js: невозможно добавить плагин в vue.config.js с помощью configureWebpack

0 голосов
/ 31 октября 2018

Проблема веб-пакета vue.js: я не могу добавить плагин в vue.config.js с помощью configureWebpack

Я создал проект vue.js с vue cli 3. Я следую примеру в: https://cli.vuejs.org/guide/webpack.html

My vue.config.js: 

let webpack = require('webpack');

module.exports = {

    configureWebpack: {
        plugins: [
            new webpack.DefinePlugin({
                __TEST_MESSAGE__: JSON.stringify('howdy there!')
            })
        ]
    },
};

Разрешенная конфигурация веб-пакета выглядит следующим образом: 

{
    mode: 'production',
    ...
    plugins: [
        /* config.plugin('vue-loader') */
        new VueLoaderPlugin(),

        /* config.plugin('define') */
        new DefinePlugin(
          {
            'process.env': {
              VUE_APP_CLI_UI_URL: '""',
              NODE_ENV: '"production"',
              BASE_URL: '"/"'
            }
          }
        ),
        /* config.plugin('case-sensitive-paths') */
        new CaseSensitivePathsPlugin(),

        ...
        /////////////////////////////////////////////////////
        // Inserted note for SO: This is messed up!  Should
        // be: 
        // new DefinePlugin({ __TEST_MESSAGE__: '"howdy there!"' })
        /////////////////////////////////////////////////////
        {
          definitions: {
            __TEST_MESSAGE__: '"howdy there!"'
          }
        }
    ],
    ...
}

configureWebPack должен объединить мои плагины с определенными плагинами. Почему он удаляет класс DefinePlugin и просто включает аргумент для конструктора в массиве плагинов?

1 Ответ

0 голосов
/ 31 октября 2018

Поскольку Vue уже включает DefinePlugin, вам нужно изменить его, используя цепочечный API-интерфейс Webpack, а не пытаться добавить новый. 

module.exports = {
  chainWebpack: config => {
    config.plugin('define').tap(args => {
      args[0].__TEST_MESSAGE__ = JSON.stringify('howdy there!')
      return args
    })
  }
}

В результате получается следующий конфиг (просто пример) ... 

new DefinePlugin(
  {
    'process.env': {
      NODE_ENV: '"development"',
      BASE_URL: '"/"'
    },
    __TEST_MESSAGE__: '"howdy there!"'
  }
),

См. https://cli.vuejs.org/guide/webpack.html#modifying-options-of-a-plugin

...