Я пытаюсь настроить webpack с webpack-dev-сервером с помощью Express в фоновом режиме - сервер запускается нормально, без ошибок, но по некоторым причинам основной JS а не в комплекте. Связанный файл должен быть сохранен в каталоге public/assets/js
с именем main.min.js
, но этот каталог пуст.Webpack не связывает файлы, но обычно запускает webpack-dev-сервер
Это моя структура каталогов: 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()
]
}
server.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);
})
сервер/config.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...');
});
}