2017-02-02 4 views
-1

Я пытаюсь настроить 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...'); 
    }); 

} 

ответ

0

Итак, проблема была довольно проста, я не обратил внимание, что документы о WebPack-DEV-сервер говорит:

«Используя эту конфигурацию, webpack-dev-сервер будет обслуживать статические файлы в вашей папке сборки. Он будет смотреть ваши исходные файлы и пересобрать пакет всякий раз, когда они изменяются.»

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

Так что в моем случае файл был в комплекте под public/main.min.js

Смежные вопросы