Question

我收到一个空白的html文档。但是，当我查看src代码时，我看到我的脚本标记引用了dist / app.js，这是我的捆绑代码。

这是我的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>

Answer 1

抱歉，仍然无法发表评论，所以我不得不回答。

我的猜测是路径偏离某些东西可能会尝试在dist前面扔一个点

<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-plugin

webpack输出未在index.html中显示

1 个答案: