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