Question

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

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

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

main.min.js

webpack.config.js

{
  "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": "*"
  }
}

server.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()
  ]
}

服务器/ config.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);
})

Answer 1

好的，问题很简单，我没有注意webpack-dev-server的文档：

＆＃34;使用此配置，webpack-dev-server将提供构建文件夹中的静态文件。它会监视你的源文件，并在它们被更改时重新编译它。＆＃34;

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

所以在我的案例中，文件被捆绑在{{1}}

下

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

1 个答案: