webpack 不生成 bundle.js

Question

我正在制作一个使用 react 和 php 的 web 应用程序，并且我正在使用 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 文件夹中？仅将其保存到内存并在本地主机上显示。我想将这个反应应用程序与 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'
}

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

运行npm run build

Answer 2

这是 webpack 开发服务器的预期行为。如果你想在磁盘上生成输出，你需要运行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"