与 Webpack 开发服务器一起使用时，Webpack 不生成包

Posted 2023-02-21

【中文标题】与 Webpack 开发服务器一起使用时，Webpack 不生成包

【英文标题】：Webpack not generating bundle when used with Webpack Dev Server

【发布时间】：2019-12-06 00:30:18

【问题描述】：

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

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',
    ],
  
);

开发服务器.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

这将启动开发服务器，此输出已成功构建捆绑包，但它们从未出现在我的文件系统中，所以一定有一个我没有在开发服务器中正确设置的输出配置？

编辑

问题结果如以下帖子所述。 为了访问实时捆绑重新加载，我将捆绑公共路径从“生产服务器”编辑回构建位置，然后从开发服务器访问页面而不是“生产服务器”提供的页面

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

【参考方案1】：

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

【讨论】：

谢谢，这是我的误会。