Question

我正在制作一个web应用程序使用react和php，我正在使用webpack for es6 to js所以我生成了文件，但我有一个关于webpack输出bundle.js文件的问题。

这是我的webpack.config.js

const webpack = require('webpack');

module.exports = {
  entry: [
    './src/index.jsx'
  ],
  output: {
    path: '/dist',
    publicPath: '/dist/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './dist',
  },
  module: {
    rules: [{
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['env', 'react']
        }
      }
    }, {
      test: /(\.css|.scss)$/,
      use: [{
        loader: "style-loader"
      }, {
        loader: "css-loader"
      }, {
        loader: "sass-loader"
      }]
    }]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  }
};

这是我的package.json

{
  "name": "react-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --history-api-fallback --progress --colors --config ./webpack.config.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "axios": "^0.17.1",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "clean-webpack-plugin": "^0.1.18",
    "css-loader": "^0.28.9",
    "html-webpack-plugin": "^2.30.1",
    "node-sass": "^4.7.2",
    "react-hot-loader": "^3.1.3",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.20.1",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.11.1"
  },
  "dependencies": {
    "bootstrap": "^4.0.0",
    "express": "^4.16.2",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-router-dom": "^4.2.2",
    "reactstrap": "^5.0.0-beta"
  }
}

为什么webpack生成并将一个bundle.js放入dist文件夹？只将它保存到内存并显示在localhost上。我想用这个反应应用程序与PHP但我无法处理bundle.js。问题出在哪里以及为什么webpack没有生成js文件。请帮帮我

Answer 1

您的webpack配置输出文件出现问题。

首先在webpack.config.js中导入const path = require('path')并更改output，如下所示：

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

并将以下脚本添加到script提交的package.json中 "build": "webpack -p --progress"

运行npm run build

Answer 2

这是webpack dev服务器的预期行为。如果要在磁盘上生成输出，则需要运行webpack，例如：

"scripts": {
  "start": "webpack-dev-server --history-api-fallback ...",
  "build": "webpack"
}

然后运行npm build。对于制作，您还应设置NODE_ENV=production，例如使用cross-env：

"build": "cross-env NODE_ENV=production webpack"

webpack没有生成bundle.js

2 个答案: