如何通过 webpack 将所有内容构建到具有文件夹结构的 dist 中？

Question

我是一名多年的 Java 开发人员，刚刚接触 js 世界。这个问题听起来很愚蠢，但我不知道为 reactjs 应用程序构建 dist 以部署到生产（nginx/apache）的正确/最佳方法是什么。

据我了解，dist 就像简单的网络应用程序一样，应该看起来像 包含：

• index.html
• client.js（编译后打包的js）
• 静态文件，例如 图片、css、js库等

我遵循以下指南：

• https://github.com/learncodeacademy/react-js-tutorials/tree/master/1-basic-react 并有一个简单的网络应用程序（也许这不称为网络应用程序）运行： npm 运行开发

它使用 webpack 打包 client.js.min 并通过节点部署到嵌入式 Web 服务器（也许我错了）。

问题： 如何通过命令构建所有东西，比如“npm run build”，它应该在一个名为“dist”的文件夹中构建所有东西。所以我可以通过将每个 in dist 复制到 web 根目录来将它部署到 web 服务器根目录。

package.json

 {
      "name": "react-tutorials",
      "version": "0.0.0",
      "description": "",
      "main": "webpack.config.js",
      "dependencies": {
        "babel-core": "^6.17.0",
        "babel-loader": "^6.2.0",
        "babel-plugin-add-module-exports": "^0.1.2",
        "babel-plugin-react-html-attrs": "^2.0.0",
        "babel-plugin-transform-class-properties": "^6.3.13",
        "babel-plugin-transform-decorators-legacy": "^1.3.4",
        "babel-preset-es2015": "^6.3.13",
        "babel-preset-react": "^6.3.13",
        "babel-preset-stage-0": "^6.3.13",
        "react": "^0.14.6",
        "react-dom": "^0.14.6",
        "webpack": "^1.12.9",
        "webpack-dev-server": "^1.14.1"
      },
      "devDependencies": {},
      "scripts": {
        "dev": "webpack-dev-server --content-base src --inline --hot",
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC"
    }

webpack.config.js

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');

module.exports = {
  context: path.join(__dirname, "src"),
  devtool: debug ? "inline-sourcemap" : false,
  entry: "./js/client.js",
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0'],
          plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties'],
        }
      }
    ]
  },
  output: {
    path: __dirname + "/src/",
    filename: "client.min.js"
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};

Answer 1

在您的 package.json 脚本字典中添加以下内容

"build" : "NODE_ENV='production' && node_modules/.bin/webpack -p"

这将告诉 webpack 读取配置文件并在生产模式下构建它，即缩小等。 -p 标志可以做到这一点。 node env 是为了确保生产构建用于 react 和其他库，并为 NODE_Env 设置生产环境变量

运行类型。 npm run build