Webpack 不捆绑文件，但正常启动 webpack-dev-server

Question

我正在尝试使用 webpack-dev-server 在后台使用 Express 设置 webpack - 服务器正常启动，没有错误，但由于某些原因主 JS 没有捆绑。捆绑的文件应存储到名为 main.min.js 的 public/assets/js 目录中，但此目录为空。

这是我的目录结构：https://i.stack.imgur.com/TrwNp.png

让我们从依赖项开始 - package.json

{
  "name": "build-process",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "start": "node server"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/"
  },
  "homepage": "https://github.com/",
  "devDependencies": {
    "webpack": "^2.2.0"
  },
  "dependencies": {
    "babel-core": "^6.17.0",
    "babel-loader": "^6.2.4",
    "babel-plugin-transform-runtime": "^6.9.0",
    "babel-preset-es2015": "^6.16.0",
    "babel-runtime": "^6.9.2",
    "css-loader": "^0.26.1",
    "express": "^4.14.1",
    "file-loader": "^0.10.0",
    "http-proxy": "^1.16.2",
    "url-loader": "^0.5.7",
    "vue": "^1.0.28",
    "vue-html-loader": "^1.2.3",
    "vue-loader": "^8.5.3",
    "vue-resource": "^0.9.3",
    "vue-router": "^0.7.13",
    "vue-style-loader": "^1.0.0",
    "webpack-dev-server": "^1.16.2",
    "webpack-hot-middleware": "*"
  }
}

webpack.config.js

// Main dependencies
var webpack = require('webpack');
var path    = require('path');
// Storing some paths into variables for easy usage
var nodeModulesPath = path.resolve(__dirname, 'node_modules');
var buildPath = path.resolve('/public/assets/js');
var mainPath = './resources/assets/scripts/main.js';
// Config everything
module.exports = {
  // Entry files setup
  entry: ['webpack/hot/dev-server', 'webpack-dev-server/client?http://localhost:8080', mainPath],
  // Thing related to output bundled files and proxies
  output: {path: buildPath, filename: '[name].min.js', publicPath: '/public'},
  // Loaders
  module: {
    loaders: [
      { test: /.js$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /.vue$/, loader: 'vue' }
    ]
  },
  // Plugins
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
}

服务器.js

// Require dependencies
var express = require('express');
var path    = require('path');
var httpProxy = require('http-proxy');
var proxy = httpProxy.createProxyServer();
var app = express();
var prod = process.env.NODE_ENV === 'production';
var port = prod ? process.env.PORT : 3000
var publicPath = path.resolve(__dirname, 'public');
app.use(express.static(publicPath));
if (!prod) {
  // Start bundling only in development
  var bundle = require('./server/config.js');
  bundle();
  // Proxy requrest to webpack-dev-server
  app.all('/public/*', function (req, res) {
    proxy.web(req, res, {
        target: 'http://localhost:8080'
    });
  });
}
// Catch proxy errors
proxy.on('error', function(e) {
  console.log('Could not connect to proxy, please try again...');
});
// Listen on specified port
app.listen(port, function() {
  console.log('Server started on port ' + port);
})

服务器/配置.js

var webpack = require('webpack');
var webpackDevServer = require('webpack-dev-server');
var webpackConfig = require('../webpack.config.js');
var path = require('path');
var fs = require('fs');
var mainPath = path.resolve(__dirname, '..', 'resources/assets/scripts', 'main.js');
module.exports = function() {
  // Fire webpack and run compiler
  var bundleStart = null;
  var compiler = webpack(webpackConfig);
  // Notify console that bundling started
  compiler.plugin('compile', function() {
    console.log('Bundling...');
    bundleStart = Date.now();
  });
  // Notify when compiling is done
  compiler.plugin('done', function() {
    console.log('Bundled in ' + (Date.now() - bundleStart) + 'ms!');
  });
  // Init instance of webpackDevServer
  var bundler = new webpackDevServer(compiler, {
    publicPath: '/public/',
    hot: true,
    quiet: false,
    noInfo: true,
    stats: {
      colors: true
    }
  });
  // Start development server and give some notifications in console
  bundler.listen(8080, 'localhost', function() {
    console.log('Bundling project, please wait...');
  });
}

Answer 1

好的，所以问题很简单，我没有注意 webpack-dev-server 的文档说了什么：

"使用此配置，webpack-dev-server 将为您的构建文件夹中的静态文件提供服务。它将监视您的源文件，并在更改时重新编译捆绑包。

https://webpack.github.io/docs/webpack-dev-server.html

所以在我的案例中，文件被捆绑在public/main.min.js