Configuring dist/main.js to be included when dev server starts

[ninode97]

Hello.

I am struggling to configure webpack to make bundle (main.js) to be available in dist directory.

  async _buildDevelopment() {
    try {
      const _devServer = {
        static: {
          directory: this._buildDistDir,
        },
        port: 5000,
        open: false,
        liveReload: true,
        server: 'https',
        devMiddleware: {
          writeToDisk: true,
        },
      };

      /**
       * @type {import('webpack-dev-server').Configuration}
       */
      const config = {
        devtool: 'source-map',
        entry: this._buildEntryFile,
        output: {
          filename: 'main.js',
          path: path.resolve(this.root, 'dist'),
        },
        mode: 'development',
        plugins: [
          new MiniCssExtractPlugin({
            filename: 'style.css',
          }),
          new HtmlWebpackPlugin({
            template: this.buildIndexHtmlFile,
            inject: false,
          }),
          new VueLoaderPlugin(),
        ],
        devServer: _devServer,
        resolve: {
          extensions: ['.ts', '.tsx', '.js'],
          alias: {
            vue: 'vue/dist/vue.esm-bundler.js',
          },
        },
        module: {
          rules: [
            {
              test: /\.tsx?$/,
              loader: 'ts-loader',
              options: {
                appendTsSuffixTo: [/\.vue$/],
              },
            },
            {
              test: /\.vue$/,
              loader: 'vue-loader',
            },
            {
              test: /\.less$/i,
              use: [
                MiniCssExtractPlugin.loader,
                {
                  loader: 'css-loader',
                  options: {
                    url: false,
                  },
                },
                'less-loader',
              ],
            },
          ],
        },
      };

      const compiler = webpack(config);

      // Create webpack dev server instance
      const webpackDevServer = new WebpackDevServer(_devServer, compiler);

      await webpackDevServer.start();
      new FSEventDispatcher({ frameworkRoot: this.root, distDir: this._buildDir });
      console.log('Webpack dev server started on https://localhost:5000');
    } catch (error) {
      throw new BundlerError(`Failed to start development server - reason '${error.message}'`, Errors.ERR_WEBPACK_DEV_MODE);
    }
  }

I have custom script that relies on dist/main.js which is run by my project.

The solution I have works when I just compile the project (without dev server).

But when I launch dev-server, the js file is not available it is cached somewhere and I don't know where.. :D

Desired outcome:

• Starting dev-server main.js would be injected in dist directory.

Or:

• Any location, where I could find main.js which is being then injected into index.html?

[AdarshSajwan2003]

Webpack dev server doesn't write bundles to disk by default in dev mode. It serves them in-memory for faster performance.

[ninode97]

Is it possible to configure it, so it would write to the disk?

[Alexander Akait]

https://webpack.js.org/configuration/dev-server/#devserverdevmiddleware, set writeToDisk: true,