老师，我这css样式无法加载，但是编译都通过，图片路径编译也没有问题，在body中写入hello webpack-dev-server 一样可以自动更新
来源：3-8 webpack-dev-server
阿忠01
2018-01-14
wepack.config.js的代码
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';
console.log(WEBPACK_ENV);
//获取html-webpack-plugin参数的方法
var getHtmlConfig = function(name){
return{
template : './src/view/'+ name +'.html',
filename : 'view/'+ name +'.html',
inject : 'true',
hash : 'true',
chunks : ['common', name]
};
};
var config = {
//页面入口文件配置
entry: {
'common' : ['./src/page/common/index.js'],
'index' : ['./src/page/index/index.js'],
'login' : ['./src/page/login/index.js'],
},
//入口文件输出配置
output: {
path: './dist',
//添加publicPaht 是为了更新加载项目文件 因为我项目使用..开始，会找不到具体文件下
publicPath : '/dist/',
filename: 'js/[name].js'
},
//jquery 引入
externals :{
'jquery' : 'window.jQuery'
},
module: {
loaders: [
{ test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader","css-loader") },
//图片的loader 限制图片的大小 100 保留文件的名字和后缀，不必改为hash值?limit=100&name=resource/[name].[ext]
{ test: /\.(gif|png|jpg|woff|svg|eot|ttf)\??.*$/, loader: 'url-loader?limit=100&name=resource/[name].[ext]' }
]
},
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;
index.css 代码
body{
background: #ccc;
}
index.html 代码
<!DOCTYPE html>
<html>
<%= require('html-loader!./layout/html-head.html') %>
<body>
hello web-dev
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
</body>
</html>
index.js代码
'use strict';
require('../module.js');
var $$ = require('jquery');
//这里的./必须有
require('./index.css');
// $$('body').html("HELLO");
console.log('i am index');
运行结果：
1回答
-
阿忠01
提问者
2018-01-14
老师，自己解决了，代码没有问题，是我启动的是启动的是src下的index.html 所以格式都没有，应该启动的是http://localhost:8088/dist/view 这个就没有问题了，
032018-03-04
相似问题