2017-09-15 183 views
0

我得到一個空白的html文檔。但是,當我查看src代碼時,我看到我的腳本標記引用dist/app.js,這是我的捆綁代碼。webpack輸出不顯示在index.html中

這是我的WebPack這裏是我的index.html

而且,這裏是我的文件夾結構。

/dist/app.js 
/node_modules 
/src/index.js 
index.html 
package.json 
webpack.config.js 

var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = { 
    entry: { 
    homepage: './src/index.js', 
    }, 

    output: { 
    filename: './dist/app.js' 
    }, 

    // Resolve the `./src` directory so we can avoid writing 
    // ../../styles/base.css 
    resolve: { 

    extensions: ['.js', '.jsx'] 
    }, 

    // Instruct webpack how to handle each file type that it might encounter 
    module: { 
    loaders:[ 
     { 
     test: /\.js[x]?$/, exclude: /node_modules/, loader: 'babel-loader', 
     query: { 
      ///plugins: ['transform-runtime'], 
      presets: ["es2015", "react"] 
     } 
     } 
    ] 
    }, 

    // This plugin moves all the CSS into a separate stylesheet 
    plugins: [ 
    new ExtractTextPlugin('app.css') 
    ] 
}; 

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Hello</title> 
    </head> 
<body> 
    <script src="/dist/app.js"></script> 
</body> 
</html> 
+0

你如何查看index.html文件?直接從硬盤或通過開發服務器提供? – ideaboxer

+0

通過開發服務器。我正在運行npm start。 – user8280738

+0

瀏覽器控制檯沒有錯誤? – ideaboxer

回答

0

對不起仍不能評論,所以我不得不回答。

我的猜測是路徑是關閉的東西也許嘗試在蒸餾水面前扔點

<script src="./dist/app.js"></script> 

的WebPack是怪異與路徑,我對於新手,所以我不完全掌握它的所有然而。但最終你會希望緩存清除並以編程方式將你的JS包注入到你的index.html中。查看html-webpack-plugin。該插件採用主webpack塊生成一個index.html的副本與正確的腳本標記。

我建議https://survivejs.com/webpack/developing/getting-started/#setting-up-webpack-configuration入門與HTML-的WebPack-插件