webpack-dev-server 取不到元素节点。。。
本文介绍了webpack-dev-server 取不到元素节点。。。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
RT webpack-dev-server 取不到元素节点。。。
配置如下：
webpack-dev-server启动文件：
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.server.config.js');
var devPort = 8080;
//批量处理client websocket 热加载脚本
for (var i in config.entry) {
config.entry[i].unshift('webpack-dev-server/client?http://0.0.0.0:' + devPort, 'webpack/hot/dev-server');
}
config.plugins.push(new webpack.HotModuleReplacementPlugin());
//启动服务器
var server = new WebpackDevServer(webpack(config), {
contentBase: 'src',
publicPath: config.output.publicPath,
hot: true, //热替换开启
stats: {
colors: true
}
});
server.listen(devPort, function(err) {
if (err) {
console.log(err);
return;
}
console.log('dev server on http://0.0.0.0:' + devPort + '\n');
});webpack.server.config.js文件
var webpack = require('webpack');
var path = require('path');
module.exports = {
//入口文件
entry: {
index: ['./src/js/entry1']
},
//输出目录
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/[name].js',
publicPath: '/dist/'
},
//加载器
module: {
loaders: [{ test: /\.css$/, loader: 'style-loader!css-loader' }, {
test: /\.js$/,
exclude: './node_modules',
use: [{
loader: 'babel-loader',
options: { presets: ['es2015'] }
}]
}]
},
//插件
plugins: []
};
entry1.js入口文件
var header=document.getElementById('header');
console.log(header);//输出nullhtml文件index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>webpack</title>
<meta name="description" content="This web page is my webpack.">
<meta name="keywords" content="codelab">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="http://localhost:8080/dist/js/index.js"></script>
</head>
<body>
<header id="header">
<nav class='clearfix'>
<div class="logo"><em>`W</em>EBPACK</div>
<ul class="nav-menu">
<li><a class="active" href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Works</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
</body>
</html>
获取一个元素并console.log就会输出null...不知道怎么回事。。
哪位知道是什么问题望不吝赐教，webpack这个服务器净出错。。都不想用了
解决方案
var server = new WebpackDevServer(webpack(config), {
contentBase: './', //这里我改成了自己的根目录
publicPath: config.output.publicPath,
hot: true, //热替换开启
stats: {
colors: true
}
});输出结果如下，可以看到console的输出：
你可以试下，改成自己页面所在的根目录，应该是目录结构的问题
这篇关于webpack-dev-server 取不到元素节点。。。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
