Question

我是reactjs的新手。我试图配置与基本索引页面的反应，包括index.js（包含console.log（））但当我试图运行服务器index.html正确显示但bundle.js没有加载。我搜索了很多，但没有得到正确的答案，任何人都可以帮助我。

＆＃xA;＆＃xA;

我的webpack.config.js是

＆＃xA;＆＃xA ;

  // Webpack config js。＆＃xA;＆＃xA; var webpack = require（“webpack”）;＆＃xA; var path = require（“path”）;＆＃xA;＆ #xA; var DIST_VAR = path.resolve（__ dirname，“dist”）;＆＃xA; var SRC_VAR = path.resolve（__ dirname，“src”）;＆＃xA;＆＃xA;＆＃xA; var config = {＆＃XA;条目：SRC_VAR +“\\ app \\ index.js”，＆＃xA;输出：{＆＃xA;路径：DIST_VAR +“\\ app \\”，＆＃xA; filename：“bundle.js”，＆＃xA; publicPath：“\\ app \\”，＆＃xA; }，＆＃XA;模块：{＆＃xA;规则：[＆＃xA; {＆＃XA; test：/\。js？/，＆＃xA;包括：SRC_VAR，＆＃xA;装载机：“babel-loader”，＆＃xA;查询：{＆＃xA;预设：[“反应”，“es2015”，“阶段-2”]＆＃xA; }＆＃XA; }＆＃XA; ]＆＃XA; }＆＃xA;＆＃xA;};＆＃xA;＆＃xA; module.exports = config;＆＃xA;

＆＃xA;＆＃xA;

错误是在控制台中显示：使用源“ http：// localhost：8080 / app / bundle.js ”。

＆＃xA;＆＃xA;

编辑：

＆＃xA;＆＃xA;

添加文件夹列表..＆＃xA;文件夹路径列表＆＃xA;卷序列号是BE9C-4E51

＆＃xA;＆＃xA;

  C：。＆＃xA; |包lock.json＆＃XA; |的package.json＆＃XA; | webpack.config.js＆＃XA; | ＆＃XA + --- DIST＆＃XA; | | index.html的＆＃XA; | | ＆＃XA; | \ ---应用＆＃XA; | bundle.js＆＃XA; | ＆＃XA + --- node_modules＆＃XA; | ＆lt;这里的node_modules＆gt;＆＃xA; \ --- src＆＃xA; |的index.html＆＃XA; | ＆＃XA; \ ---应用＆＃XA; index.js＆＃XA;

＆＃XA;

Answer 1

我会在不看项目文件夹结构的情况下做出一些假设。看起来它可能是您的publicPath。除非你的意图是什么，否则/ app文件夹不可见，因为你的控制台正在显示＆＃34; localhost：8080 / app / bundle.js＆＃34;这意味着它正在寻找＆＃34; project-root / src / app / app / bundle.js＆＃34;而不是＆＃34; project-root / src / app / bundle.js＆＃34;

在网络包文档中，他们会告诉您默认为root＆＃39; /＆＃39;并查看我自己的webpack文件，这也是我目前设置的内容。

参考： https://webpack.js.org/guides/public-path/

编辑：以下是使用Webpack 3的示例。版本4刚刚出来，这不起作用，所以如果您使用的话，我会小心您从中获取配置示例Webpack 4。

＆＃13;

const webpack = require('webpack');
const path = require('path');

module.exports = {
    plugins: [
      // new webpack.NamedModulesPlugin(),
      // new webpack.HotModuleReplacementPlugin()
    ],
    context: path.join(__dirname, 'src'),
    entry: [
      //  'webpack/hot/dev-server',
      //  'webpack-hot-middleware/client',
      //  'babel-polyfill',
      //  'history',
      './index.js'
    ],
    output: {
      path: path.join(__dirname, 'www'),
      filename: 'bundle.js',
      publicPath: '/'
    },
    module: {
      loaders: [{
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: ['react-hot-loader/webpack', 'babel-loader']
      }],
      resolve: {
        modules: [
          path.join(__dirname, 'node_modules'),
        ],
      },
    };

＆＃13;

Answer 2

安装后

ALTER TABLE platformExchangePair MODIFY COLUMN pairName VARCHAR(20);

和

npm init -y

和你的结构文件

npm install --save-dev webpack webpack-dev-server webpack-cli

转到 package.json，并添加构建命令：

src/
build/
webpack.config.js
package.json

在 webpack.config.js 中

"scripts": {
    "start":"webpack serve --mode development",
    "build":"webpack"
  },

所以，在你的 build/index.html

const path = require('path');
 
module.exports = {
  entry: path.resolve(__dirname, './src/index.js'),
  output: {
    path: path.resolve(__dirname, './build'),
    filename: 'bundle.js',
  },
  devServer: {
    contentBase: path.resolve(__dirname, './build'),
  },
};

反应＆amp; Webpack：使用源http：// localhost：8080 / app / bundle.js的<script>加载失败

2 个答案: