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" }麻烦老师看下
添加回答
举报
0/150
提交
取消