How to configure Webpack within Vue-cli?

Question

EDIT: I stopped trying to get this working.

---

I am using Vue-cli (https://github.com/chrisvfritz/vue-enterprise-boilerplate) which uses Webpack underwater to create a website.

Now I want to change my webpack.config.js but this file does not exist.

vue.config.js contains a configureWebpack property, but this seems to be formatted different from the normal Webpack config.

The Webpack config I want to use is this:

// Webpack config
const webpack = require('webpack');
const path = require('path');
const nodeExternals = require('webpack-node-externals');
const StartServerPlugin = require('start-server-webpack-plugin');

module.exports = {
    entry: ['webpack/hot/poll?1000', './src/index'],
    watch: true,
    target: 'node',
    node: {
        __filename: true,
        __dirname: true
    },
    externals: [nodeExternals({ whitelist: ['webpack/hot/poll?1000'] })],
    module: {
        rules: [
            ...
        ]
    },
    plugins: [
        new StartServerPlugin('server.js'),
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.DefinePlugin({
            'process.env': { BUILD_TARGET: JSON.stringify('server') }
        })
    ],
    output: { path: path.join(__dirname, 'dist'), filename: 'server.js' }
};

Which I have no clue where to place in my vue.config.js which looks like this:

// Vue config
const appConfig = require('./src/app.config')

module.exports = {
  configureWebpack: {
    // We provide the app's title in Webpack's name field, so that
    // it can be accessed in index.html to inject the correct title.
    name: appConfig.title,
    // Set up all the aliases we use in our app.
    resolve: {
      alias: require('./aliases.config').webpack,
    },
    module: {
      rules: [
        {
          test: /\.styl$/,
          use: [
            'style-loader',
            {
              loader: 'css-loader',
              options: {
                modules: true,
                localIdentName: '[name]__[local]___[hash:base64:5]',
              },
            },
            'stylus-loader',
          ],
        },
      ],
    },
  },
  css: {
    // Enable CSS source maps.
    sourceMap: true,
    // Enable CSS modules for all CSS/pre-processor files.
    // This option does not affect *.vue files.
    modules: true,
  },
  // Split dependencies into their own bundle.
  // https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
  dll: true,
  // Configure Webpack's dev server.
  // https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md
  devServer: {
    ...(process.env.API_BASE_URL
      ? // Proxy API endpoints to the production base URL.
        { proxy: { '/api': { target: process.env.API_BASE_URL } } }
      : // Proxy API endpoints a local mock API.
        { before: require('./tests/mock-api') }),
  },
}

So far I have tried to past webpack.config.js into app.config.js but now Vue-cli is complaining about dependencies not being met.

These dependencies were not found:

* @components/_globals in ./src/main.js
* @router in ./src/main.js
...

Solution

Solution for Vue CLI 3.0.0

Create vue.config.js file in projects main directory:

module.exports = {
  configureWebpack: {
    devServer: {
        watchOptions: {
          ignored: ['node_modules'],
          aggregateTimeout: 300,
          poll: 1500
        },
        public: '192.168.56.132' // vagrant machine address
    }
  }
}

Comments

[Kirk B]

was using windows + vue cli 3 + wsl 2 (editing files in windows, running yarn serve in wsl) and nothing was hot reloading... put above watchOptions in place and now webpack devserver is picking up changes.