webpack - 使用 webpack-dev-serve 提供构建版本

Question

我创建了一个 Typescript 库供内部使用，我想配置我webpack-dev-serve的库的构建版本，供必须在本地开发中使用它的用户使用。

因为目前，我必须先运行npm run build，然后再运行npm run start。我想要实现的是删除运行构建步骤并说webpack-dev-serve，为我提供构建版本。我尝试了几种方法，但我没有解决它，也许我错了。

包.json

{
  "name": "lib",
  "version": "0.0.0",
  "scripts": {
    "start": "webpack serve --mode=production",
    "build": "webpack --mode=production",
...
}

webpack.config.js

const path = require('path');

module.exports = (env = {}) => {
  return {
    devtool: env.WEBPACK_SERVE ? 'source-map' : undefined,
    devServer: {
      filename: 'main.js',
      port: 5050,
    },
    entry: './src/main.ts',
    module: {
      rules: [
        {
          exclude: /node_modules/,
          test: /\.tsx?$/,
          use: 'ts-loader',
        },
      ],
    },
    output: {
        filename: 'main.js',
        libraryTarget: 'system',
        path: path.join(__dirname, 'dist'),
      },
    resolve: {
      extensions: ['.js', '.ts'],
    },
  };
};

我的做法：

• 我尝试使用该标志--mode=production，但代码完全不同，不适用于我。
• 我包括historyApiFallback里面的devServe，指向路径dist/main.js，但我仍然需要先运行npm run build

我的目标是调用localhost:5050/main.js路径并获取构建版本。

标签： webpackwebpack-dev-server