webpack中dev-server不写contentBase时如何设置可以显示页面并且加载js

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

今天学习了dev-server这个配置，中间遇到疑惑，我写了contentBase是可以走通，可以再localhost:8080看到页面并且正确加载bundle.js的，

但是这个contentBase并不是必须的，不写按理说也可以实现显示页面并且加载js,但是我去掉后，可以编译成功，但是我这里就遇到问题了，一直提示找不到bundle.js。

我的目录设置如下：

其中index.html是我手动写的里面用script标签来引用bundle.js。

这里的路径要根据index.html所在的位置来引用bundle.js所以要就加上js这个文件夹。

我的webpack.config.js配置如下：

/**
* Created by zxf on 2017/4/25/0025.
*/
const path=require('path');
var htmlPlugin=require('html-webpack-plugin');
module.exports={
entry:'./src/js/main.js',
output:{
filename:'js/bundle.js',
path:path.resolve(__dirname,"./dist")
},
module:{
rules:[
{
test:/\.css$/,
use:[
{loader:'style-loader'},
{loader:'css-loader'}
]}
]
},
devServer:{
inline:true
}
}

那么配置好上面的，运行webpack-dev-server后编译没有报错，但是打开localhost:8080,发现并没有自动显示index.html的内容，

而是显示根目录下的文件夹以及webpack配置文件，这个可以理解因为并没有显式的设置contentBase，我可以手动点击进入dist文件夹下，

进入后就会提示找不到bundle.js，因为我在html文件里面写了<script src="./js/bundle.js"></script>这里我认为是dev-server并没有去获取内存中的js,

而是一直在获取本地的bundle.js，不应该啊，dev-server是会在内存中生成js和html页面的，这是为什么呢？后来经过大神指点，明白了，

原来不指定contentBase的话dev-server的默认根目录是在webpack.config同一级的目录下，我在这个目录下并没有写index.html，而在dist/下写了index.html，

它就以这个本地我写的为准了，而内存中的html的路径还是在根目录下，解决方法是在根目录下新建一个index.html,里面引用js的路径不用改，但是这样很不方便啊，

如果是多页应用，不可能在根目录下建立那么多页面文件，这里有两个思路：一是必须写上contentBase参数，二是利用webpack-html-plugin这个插件它可以生成html文件到指定的目录下，这样就可以不用再根目录下建立页面文件了，直接在src下建立模板文件，

/**
* Created by zxf on 2017/4/25/0025.
*/
const path=require('path');
var htmlPlugin=require('html-webpack-plugin');
module.exports={
entry:'./src/js/main.js',
output:{
filename:'js/bundle.js',
path:path.resolve(__dirname,"./dist/")
},
module:{
rules:[
{
test:/\.css$/,
use:[
{loader:'style-loader'},
{loader:'css-loader'}
]}
]
},
plugins:[
new htmlPlugin({
filename:'index.html',
template:"./src/index.html"
}),
new htmlPlugin({
filename:'b.html',
template:"./src/b.html"
})],
devServer:{
inline:true
}
}