設置webpack以進行反應項目

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

這是因為您已將inject設置為false。 如果不這樣做，webpack將為輸出目錄中的所有生成腳本創建腳本標記。

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

Answer 2

您不包括在html文件中為您生成的腳本webpack 。

在最簡單的形式中， 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 個解決方案

解決方案1
2 2018-08-25 21:42:26

解決方案2
1 已采納 2017-11-03 19:29:39

設置webpack以進行反應項目

問題描述

2 個解決方案

解決方案1 2 2018-08-25 21:42:26

解決方案2 1 已采納 2017-11-03 19:29:39

解決方案1
2 2018-08-25 21:42:26

解決方案2
1 已采納 2017-11-03 19:29:39