webpack不生成bundle.js

Question

我正在使Web应用程序使用react和php，并且我正在将webpack用于es6到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'
}

并在script文件"build": "webpack -p --progress"中将以下脚本添加到您的package.json中"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"