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

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

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

我的目录设置如下：

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

<script src="./js/bundle.js"></script>

这里的路径要根据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
    }
}

　　有几个页面就写几个new htmlPlugin()配置，template参数写上模板的路径，这样也可以实现不写contentBase的情况下正确显示页面并且加载js