如何讓bundel.js直接在主頁上執行代碼？

Question

我對 Webpack 世界很陌生。 我已經配置了 webpack 和 babel，當我訪問http://localhost:8080/dist/bundle.js時，它運行代碼。 但是當我在http://localhost:8080上時，它不會運行代碼。

我嘗試更改 output 路徑，再次創建構建，在腳本標簽中嘗試不同的東西，但看起來它不起作用。

Webpack.config.js

var path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {

    entry: path.resolve(__dirname, 'src/index.js') ,
    output: {
        path: path.resolve(__dirname, '/dist'),
        filename: 'bundle.js',
        publicPath: '/dist/bundle.js'
    },

    plugins: [
        new HtmlWebpackPlugin({
            template: __dirname + '/public/index.html',
            filename: 'index.html',
            inject: 'body'
        }), // Generates default index.html
        // new HtmlWebpackPlugin({  // Also generate a test.html
        //     filename: 'test.html',
        //     template: 'src/assets/test.html'
        // })
    ],

    devServer: {
        contentBase: "./public",
        hot: true
    },

    module: {
        rules: [
            {
                test: /.js$/,
                loader: 'babel-loader',
                query: {
                    presets: ['@babel/react', '@babel/env'],
                    plugins: ['@babel/proposal-class-properties']
                }
            }
        ]
    }
};

.babelrc

{“預設”：[“@babel/preset-env”，“@babel/preset-react”]}

package.json

{
  "name": "ondemnd-web",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "babel-core": "7.0.0-bridge.0",
    "react": "^16.10.2",
    "react-dom": "^16.10.2",
    "react-scripts": "3.2.0"
  },
  "scripts": {
    "start": "webpack-dev-server --mode development --open --hot",
    "build": "webpack --mode production",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/cli": "^7.6.2",
    "@babel/core": "^7.6.2",
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@babel/plugin-transform-react-jsx": "^7.3.0",
    "@babel/preset-env": "^7.6.2",
    "@babel/preset-react": "^7.0.0",
    "babel-jest": "^24.9.0",
    "babel-loader": "^7.1.5",
    "html-webpack-plugin": "^3.2.0",
    "regenerator-runtime": "^0.13.3",
    "webpack": "^4.41.0",
    "webpack-cli": "^3.3.9",
    "webpack-dev-server": "^3.8.2"
  }
}

索引.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <title>React App</title>
  </head>
  <body>
    <div id="root"><h1>hello, world</h1></div>
    <script type="text/babel" src="/dist/bundle.js"></script>
  </body>
</html>

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

alert('It worksssssssssssssssssssssssssssssssssssssssssssss');

console.log("sjakdskladjlskajdlsdj");

應用程序.js

import React from 'react';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

此外，即使我運行“npm run-script build”也沒有看到正在生成的 dist 文件夾，我也沒有看到正在生成的 dist 文件夾。 不知道是不是這個原因。

我的項目結構如下所示：

本地服務器 - dist/bundle.js：

本地服務器 - 主頁：

看起來我錯過了一塊拼圖，但不知道是什么。 如果您有任何解決此問題的建議，這將非常有幫助。

Answer 1

如果您想看到您的應用程序在 root 上運行，您需要將output.publicPath設置為 root。 嘗試這個：

output: {
    path: path.resolve(__dirname, '/dist'),
    filename: 'bundle.js',
    publicPath: '/'
},

您還需要將devServer.contentBase設置為您的構建目錄：

devServer: {
    contentBase: path.resolve(__dirname, '/dist'),
    // ...
}

如何讓bundel.js直接在主頁上執行代碼？

問題描述

1 個解決方案

解決方案1
0 已采納 2019-10-09 11:39:39

如何讓bundel.js直接在主頁上執行代碼？

問題描述

1 個解決方案

解決方案1 0 已采納 2019-10-09 11:39:39

解決方案1
0 已采納 2019-10-09 11:39:39