Question

我有新的反应和webpack。我有一个非常简单的反应项目，并尝试使用webpack加载它，但它只显示public/index.html文件。我的所有组件都没有加载。

我添加了一些像

这样的软件包

巴别核，巴别装载机，巴别预置-ES2015，巴别预置-反应，CSS-装载机，的WebPack

到devDependencies

这是我的webpack配置文件

/*
    ./webpack.config.js
*/
const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: './public/index.html',
  filename: 'index.html',
  inject: false
})

var ManifestPlugin = require('webpack-manifest-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve('dist'),
    filename: 'index_bundle.js'
  },
  module: {
    loaders: [
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.css$/, use: [ 'style-loader', 'css-loader' ]},
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loaders: ['file-loader?context=src/images&name=images/[path][name].[ext]', {
          loader: 'image-webpack-loader',
          query: {
            mozjpeg: {
              progressive: true,
            },
            gifsicle: {
              interlaced: false,
            },
            optipng: {
              optimizationLevel: 4,
            },
            pngquant: {
              quality: '75-90',
              speed: 3,
            },
          },
        }],
        exclude: /node_modules/,
        include: __dirname,
      }
    ]
  },
  plugins: [
    HtmlWebpackPluginConfig,
    new ManifestPlugin()
  ]
}

这是我的src/index.js文件

import React from 'react'
import { render } from 'react-dom'
import { BrowserRouter } from 'react-router-dom'
import App from './App';
import registerServiceWorker from './registerServiceWorker';

render((
  <BrowserRouter>
    <App />
  </BrowserRouter>
), document.getElementById('root'));
registerServiceWorker();

这是我的html文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->

    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

这是我启动后的控制台日志

yarn start
yarn run v1.2.1
$ webpack-dev-server
Project is running at http://localhost:8080/
webpack output is served from /
Hash: 8af99359537f6384fd41
Version: webpack 3.8.1
Time: 3425ms
                            Asset       Size  Chunks                    Chunk Names
images/_/components/Home/back.png    24.4 kB          [emitted]
                  index_bundle.js    1.41 MB       0  [emitted]  [big]  main
                       index.html    1.52 kB          [emitted]
                    manifest.json  114 bytes          [emitted]
   [0] ./node_modules/react/index.js 190 bytes {0} [built]
  [29] ./node_modules/react-router-dom/es/index.js 925 bytes {0} [built]
  [39] multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js 40 bytes {0} [built]
  [40] (webpack)-dev-server/client?http://localhost:8080 7.95 kB {0} [built]
  [41] ./node_modules/url/url.js 23.3 kB {0} [built]
  [48] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
  [50] ./node_modules/loglevel/lib/loglevel.js 7.74 kB {0} [built]
  [51] (webpack)-dev-server/client/socket.js 1.05 kB {0} [built]
  [53] (webpack)-dev-server/client/overlay.js 3.73 kB {0} [built]
  [58] (webpack)/hot nonrecursive ^\.\/log$ 170 bytes {0} [built]
  [60] (webpack)/hot/emitter.js 75 bytes {0} [built]
  [62] ./src/index.js 723 bytes {0} [built]
  [65] ./node_modules/react-dom/index.js 1.36 kB {0} [built]
 [104] ./src/App.js 2.52 kB {0} [built]
 [117] ./src/registerServiceWorker.js 4.03 kB {0} [built]
    + 103 hidden modules
Child html-webpack-plugin for "index.html":
     1 asset
       [0] ./node_modules/html-webpack-plugin/lib/loader.js!./public/index.html 1.92 kB {0} [built]
       [1] ./node_modules/lodash/lodash.js 540 kB {0} [built]
       [2] (webpack)/buildin/global.js 488 bytes {0} [built]
       [3] (webpack)/buildin/module.js 495 bytes {0} [built]
webpack: Compiled successfully.

Answer 1

这是因为您将注入设置为false。如果不这样做，webpack将在输出目录中为所有生成的脚本创建脚本标签。

const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: './public/index.html',
  filename: 'index.html',
  // inject: false
})

Answer 2

您的webpack文件中未包含html生成的脚本。

最简单的格式webpack需要entry和output。

我们如何看待更简单的示例来了解webpack如何工作：

webpack.config.js

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js'
  }
};

index.html

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

尝试运行webpack并在运行index.html后手动启动webpack-dev-server文件。

设置webpack以进行反应项目

2 个答案: