Webpack-dev-server未生成bundle至dist目录，build正常问题咨询

嗨，我来帮你排查这个问题！首先要明确一个关键点：webpack-dev-server 默认不会把打包后的文件写入磁盘，而是将它们存在内存中——这就是为什么你在dist目录里看不到bundle.js，但npm run build能正常输出的原因。它这么做是为了提升热更新的速度，避免频繁的磁盘IO操作。

下面分两种场景给你解决方案：

场景1：希望保留webpack-dev-server的热更新功能（不需要磁盘输出） #

这种情况下，你需要确保页面能正确加载内存中的bundle.js，可以通过以下两种方式调整：

方法1：手动修正index.html的脚本路径 #

如果你的index.html里原本引用的是dist/bundle.js，请改成<script src="/bundle.js"></script>。因为webpack-dev-server会把内存中的文件挂载到服务器的根路径下，直接访问http://localhost:8080/bundle.js就能获取到打包后的文件。

同时，在webpack.config.js里配置devServer的contentBase和publicPath，确保静态资源路径正确：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/' // 必须和devServer的访问路径一致
  },
  devServer: {
    contentBase: './dist', // 告诉devServer从dist目录提供静态文件
    hot: true // 开启热更新，提升开发体验
  },
  // SASS编译的配置（你build正常，这部分应该没问题）
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  }
};

方法2：使用html-webpack-plugin自动管理引用 #

推荐用这个插件，它会自动生成index.html并正确引入打包后的bundle.js，彻底避免路径问题。

1. 先安装插件：

npm install html-webpack-plugin --save-dev

2. 修改webpack.config.js：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  devServer: {
    contentBase: './dist',
    hot: true
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html' // 指定你的源html文件路径
    })
  ]
};

之后运行npm run watch，访问http://localhost:8080就能直接看到页面，插件会自动处理bundle.js的引用。

场景2：必须让watch模式下输出文件到dist目录 #

如果你确实需要在开发时看到dist目录里的bundle.js，那可以放弃webpack-dev-server，改用webpack原生的--watch命令：

修改package.json里的scripts：

"scripts": {
  "build": "webpack",
  "watch": "webpack --watch"
}

运行npm run watch后，webpack会监听文件变化，每次修改都会重新打包并将bundle.js写入dist目录。不过这种方式没有热更新功能，需要手动刷新浏览器才能看到变化。

额外提醒：生产环境提取单独CSS文件 #

如果你的build命令需要把SASS编译成单独的CSS文件（而不是注入到JS里），可以用mini-css-extract-plugin代替style-loader：

1. 安装插件：

npm install mini-css-extract-plugin --save-dev

2. 修改webpack配置：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          // 生产环境用插件提取CSS，开发环境用style-loader注入
          process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'style.css'
    })
  ]
};

然后把build脚本改成：

"scripts": {
  "build": "NODE_ENV=production webpack",
  // Windows系统改成："build": "set NODE_ENV=production && webpack"
  "watch": "webpack-dev-server"
}

内容的提问来源于stack exchange，提问作者Bernd Plegt