使用Babel与webpack-dev-server时未生成编译文件问题求助

我来帮你理清这个问题：

问题根源 #

你用npm run serve启动的webpack-dev-server，默认是把打包好的文件存在内存里，不会写入磁盘的dist文件夹。这么做是为了提升开发时的热更新速度——内存读写比磁盘快太多了，所以控制台显示编译成功，但磁盘上找不到文件是正常现象。而npm run watch是普通的webpack监听模式，它会把文件实实在在写入磁盘，所以你能看到bundle.js。

两种解决方案 #

方案1：让webpack-dev-server写入磁盘（最直接） #

在你的webpack配置里添加devServer配置项，开启writeToDisk即可。修改后的webpack.config.js如下：

var path = require('path');
const frontend = {
 entry: [ './src/js/app.js' ],
 output: {
 filename: 'bundle.js',
 path: path.resolve(__dirname, 'dist')
 },
 node: { fs: 'empty' },
 module : {
 rules: [
 { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }
 ]
 },
 stats : { colors: true },
 devtool : 'source-map',
 // 新增devServer配置
 devServer: {
   writeToDisk: true
 }
};
module.exports = [ Object.assign({}, frontend) ];

修改后重启npm run serve，就能在dist文件夹里看到bundle.js了。

方案2：不需要磁盘文件？直接用devServer的内存服务 #

其实如果你只是开发预览，完全不用纠结磁盘文件——webpack-dev-server已经在内存中托管了打包后的资源，你直接访问默认地址http://localhost:8080就能加载你的应用，和使用磁盘文件效果一样。这种方式反而更高效，适合日常开发。

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