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