1

首先 - 我是 webpack 的新手。我是 browserify 的忠实粉丝，但我决定将我的一个新项目切换到 webpack 以尝试每个人都在谈论的内容。

其次 - 文档有点难以阅读（页面设计、内容顺序等），没有很好的样板将现有服务器与 webpack-dev-server 集成。我正在尝试自己做，但收到一个烦人的错误..

webpack-dev-server --hot --inline --progress --colors

70% 1/1 build modules
TypeError: Object /Users/me/github/app-webpack/node_modules/webpack-dev-server/client/index.js?http://localhost:8080,webpack/hot/dev-server,webpack/hot/dev-server has no method 'replace'
at Tapable.<anonymous> (/Users/me/github/app-webpack/node_modules/webpack/lib/NormalModuleFactory.js:42:26)

就是webpack.config.js这样：

'use strict';

var webpack = require('webpack');

module.exports = {
    entry: [
        'webpack/hot/dev-server',
        './src/app.js'
    ],
    output: {
        path: __dirname + '/public/build/',
        filename: 'bundle.js',
        publicPath: '/build/'
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    module: {
        loaders: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loaders: ['babel-loader?experimental']
            }
        ]
    },
    plugins: [
        new webpack.NoErrorsPlugin()
    ]
};

现有服务器仅服务于base.html：

const env = process.env.NODE_ENV || 'development';
const port = process.env.NODE_PORT || 1995;

var http = require('http');
var path = require('path');
var express = require('express');
var nunjucks = require('nunjucks');
var address = require('network-address');

var app = express();

nunjucks.configure('layouts', {
    autoescape: true,
    express: app
});

app.set('port', port);
app.use(express.static(path.join(__dirname, 'public')));

app.get('*', (req, res) => {
    res.render('base.html', {
       // returning js file to template
       mainJS: 'http://localhost:8080/build/bundle.js'
    });
});

http.createServer(app).listen(app.get('port'), function () {
    console.info('Demo app is listening on "%s:%s" env="%s"', address(), app.get('port'), env);
});

base.html只需插入脚本：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>App Webpack</title>
</head>
<body>
    <div id="app"></div>
    <script src="{{mainJS}}"></script>
</body>
</html>
4

0 回答 0