Question

我有一个webpack配置，当我直接调用webpack时会生成反应包。由于我想合并热重载，因此我需要将Webpack开发服务器与运行在端口3000上的开发表达服务器（服务API端点）一起运行

webpack.dev.config.js

const webpack = require('webpack');
const merge = require('webpack-merge');
const Jarvis = require('webpack-jarvis');
const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = merge({}, {
  mode: 'development',
  devtool: 'cheap-module-eval-source-map',
  output: {
    chunkFilename: '[name]-[hash].js',
    publicPath: "http://localhost:3000/build/",
    crossOriginLoading: 'anonymous'
  },
  optimization: {
    noEmitOnErrors: true,
    namedModules: true,
  },
  plugins: [
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    new HtmlWebpackPlugin({
      inlineSource: '.(js|css)$',
      inject: 'head',
      filename: path.join(__dirname, "/dist/index.html"),
      template: path.join(__dirname, "/public/index.html"),
      chunks: ['common', 'main']
    }),
    new Jarvis({port: 7003}),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.DefinePlugin({
      _DEVELOPMENT_: true,
    })
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: { presets: ["es2015", "react", "stage-0"] }
        }
      },
      {
        test: /\.jsx$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: { presets: ["es2015", "react", "stage-0"] }
        }
      },
      {
        test: /\.scss$/,
        use: [
          "style-loader", // creates style nodes from JS strings
          "css-loader", // translates CSS into CommonJS
          "sass-loader" // compiles Sass to CSS, using Node Sass by default
        ]
      },
      {
        test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
        use: ["file-loader"]
      },
      {
        test: /\.svg$/,
        use: {
          loader: "svg-inline-loader"
        }
      },
      {
        test: /\.ts$/,
        use: [
          {
            loader: "ts-loader",
            options: {
              compilerOptions: {
                declaration: false,
                target: "es5",
                module: "commonjs"
              },
              transpileOnly: true
            }
          }
        ]
      }
    ]
  },
  resolve: {
    alias: {
      'react-dom': '@hot-loader/react-dom'
    }
  },
  entry: {
    main: [
      'babel-polyfill',
      'react-hot-loader/patch',
      'webpack/hot/only-dev-server',
      'webpack-dev-server/client?https://0.0.0.0:7001',
      './src/index.jsx',
    ],
  }
});

dev-server.js

const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const config = require('./webpack.dev.config');

new WebpackDevServer(webpack(config), {
  publicPath: config.output.publicPath,
  headers: {'Access-Control-Allow-Origin': '*'},
  hot: true,
  https: true,
  clientLogLevel: 'error',
  overlay: true,
  historyApiFallback: true,
  disableHostCheck: true,
  watchOptions: {
    ignored: /\/node_modules\/.*/,
  },
  stats: {
    assets: false,
    cached: false,
    cachedAssets: false,
    children: false,
    chunks: false,
    chunkModules: false,
    chunkOrigins: false,
    colors: true,
    depth: false,
    entrypoints: true,
    excludeAssets: /app\/assets/,
    hash: false,
    maxModules: 15,
    modules: false,
    performance: true,
    reasons: false,
    source: false,
    timings: true,
    version: false,
    warnings: true,
  },
}).listen(7001, '0.0.0.0', function(err, result) {
  console.log(`Serving chunks at path ${config.output.publicPath}`);
});

package.json脚本

 "scripts": {
    "build": "webpack --config webpack.dev.config.js --progress --profile --colors",
    "start-dev": "node dev-server.js",
    "build-prod": "webpack --config webpack.prod.js --progress --profile --colors",
    "start": "node server.js"
  },

如果我跑步

npm run build

结果是一个新的js包和html： dist / main.js dist / index.html

但是理想的情况是跑步

npm run start-dev

这将启动开发服务器，该输出已成功构建了捆绑软件，但它们从未出现在我的文件系统中，因此必须存在我在开发服务器中未正确设置的输出配置？

编辑

问题事实如下文所述。要访问实时捆绑包重新加载，我将捆绑包的公共路径从“生产服务器”编辑回了仅构建位置，然后从devserver访问页面，而不是“生产服务器”所服务的页面

output: {
    chunkFilename: '[name]-[hash].js',
    publicPath: "/build/",
    crossOriginLoading: 'anonymous',
    path: path.join(__dirname, "/dist"),
  },

Answer 1

Webpack开发服务器不会在每次更改源代码时将更改写入磁盘。相反，它会监视您的文件更改，对其进行处理并从内存中提供服务。查看here，因为它有详细说明。

与Webpack开发服务器一起使用时，Webpack不会生成捆绑软件

1 个答案: