webpack-dev-server启动后，页面无法解析公共模块页面

rosen老师，我用webpack-dev-server启动后访问页面，index.html 页面引入的公共模块都无法解析，

<!DOCTYPE html>
<html>
    <head> 
        <%= require('html-loader!./layout/head-common.html')%>

        <title><%= htmlWebpackPlugin.options.title%> - happymmall电商平台</title>
    </head>
    <body>
        <%= require('html-loader!./layout/nav.html')  %>
        <%= require('html-loader!./layout/header.html')  %>
        <%= require('html-loader!./layout/footer.html')  %>
        
    </body>
</html>

在通过webpack打包到dist目录下后，这些文件是可以被解析的，我的webpack配置是

var webpack             = require('webpack');
var ExtractTextPlugin   = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin   = require('html-webpack-plugin');

// 环境变量配置，dev / online
var WEBPACK_ENV         = process.env.WEBPACK_ENV || 'dev';

// 获取html-webpack-plugin参数的方法 
var getHtmlConfig = function(name){
    return {
        template    : './src/view/' + name + '.html',
        filename    : 'view/' + name + '.html',
        // title       : title,
        inject      : true,
        hash        : true,
        chunks      : ['common', name]
    };
};
// webpack config
var config = {
    devtool: 'eval-source-map',
    entry: {
        'common'            : ['./src/page/common/index.js'],
        'index'             : ['./src/page/index/index.js'],
        'user-login'        : ['./src/page/user-login/index.js'],
       
    },
    output: {
        path: './dist',
        publicPath : '/dist',
        filename: 'js/[name].js'
    },
    externals : {
        'jquery' : 'window.jQuery'
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader","css-loader") },
            { test: /\.(gif|png|jpg|woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=100&name=/resource/[name].[ext]' },
            { test: /\.string$/, loader: 'html-loader'}
        ]
    },
    // resolve : {
    //     alias : {
    //         node_modules    : __dirname + '/node_modules',
    //         util            : __dirname + '/src/util',
    //         page            : __dirname + '/src/page',
    //         service         : __dirname + '/src/service',
    //         image           : __dirname + '/src/image'
    //     }
    // },
    plugins: [
        // 独立通用模块到js/base.js
        new webpack.optimize.CommonsChunkPlugin({
            name : 'common',
            filename : 'js/base.js'
        }),
        // 把css单独打包到文件里
        new ExtractTextPlugin("css/[name].css"),
        // html模板的处理
        new HtmlWebpackPlugin(getHtmlConfig('index')),
        new HtmlWebpackPlugin(getHtmlConfig('login')),
    ]
};

if('dev' === WEBPACK_ENV){
    config.entry.common.push('webpack-dev-server/client?http://localhost:8088/');
}

module.exports = config;

packge.json 配置文件是

"dependencies": {

"font-awesome": "^4.7.0",

"hogan": "^1.0.2",

"html-webpack-plugin": "^2.28.0"

"devDependencies": {

"css-loader": "^0.28.1",

"extract-text-webpack-plugin": "^1.0.1",

"file-loader": "^0.11.1",

"html-loader": "^0.4.5",

"style-loader": "^0.17.0",

"url-loader": "^0.5.8",

"webpack": "^1.15.0",

"webpack-dev-server": "^1.16.5"

}

麻烦老师看下

rrbaby520

浏览 4172回答 2