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浏览 4082回答 2
2回答
-
斯诺克的海
请问解决了吗？改了好久了不行 -
精慕门5330565
你这样提问题，老师也会蒙圈
随时随地看视频慕课网APP
JavaScript
Node.js
React.JS