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