Question

我需要一些帮助来捆绑我的输出以进行制作，但我不知道如何。这是我的webpack.config.js

module.exports = {
    devtool: 'eval',
    context: __dirname,
    entry: "./js-source/index.jsx",
    output: {
        path: __dirname + "/scripts",
        filename: "bundle.js"
    },
    module: {
        loaders: [
            {
                test: /\.(js|jsx)$/, 
                loader: 'babel-loader',
                exclude: /node_modules/
            }
        ],
        resolve: {
            extensions: ['', '.js', '.jsx', '.json']
        }
    }
};

这是我的package.json

{
  "name": "citygross-store-web",
  "version": "2.0.0",
  "dependencies": {
    "axios": "^0.14.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-redux": "^4.1.2",
    "react-responsive": "^1.3.0",
    "react-router": "^4.1.1",
    "react-router-dom": "^4.1.1",
    "react-transition-group": "^1.2.0",
    "redux": "^3.1.2",
    "redux-logger": "^2.6.1",
    "redux-promise-middleware": "^4.0.0",
    "redux-thunk": "^2.1.0"
  },
  "devDependencies": {
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-polyfill": "^6.3.14",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-latest": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-0": "^6.24.1",
    "babel-preset-stage-1": "^6.24.1",
    "babel-preset-stage-2": "^6.13.0",
    "webpack": "^1.14.0",
    "webpack-hot-middleware": "^2.12.2"
  },
  "scripts": {
    "build": "webpack --colors",
    "dev": "webpack --watch --colors"
  },
  "-vs-binding": {
    "ProjectOpened": [
      "dev"
    ]
  }
}

您通常如何捆绑生产？通过添加像“npm run build”这样的命令并在该设置中进行其他设置？

如果有人可以帮我解决这个问题，我将不胜感激。现在我可以做“npm run dev”和“npm run build”，但是使用两者之间没有区别“run dev”创建-watcher并且build一次构建bundle。

Answer 1

运行构建脚本时，将环境变量NODE_ENV设置为production。这将导致React的生成版本包含在输出中。

最简单的方法是在package.json添加另一个脚本：

"scripts": {
    "build": "webpack --colors",
    "buildprod": "NODE_ENV=production webpack --colors",
    "dev": "webpack --watch --colors"
  },

现在，当您执行npm run buildprod时，您将获得代码的生成版本。

注意：如果您使用的是Windows，则上述操作无效。对于正确的跨操作系统，您应该使用cross-env：

安装cross-env：

npm install cross-env --save-dev

或

yarn add cross-env --dev

然后让你的脚本部分看起来像：

"scripts": {
    "build": "webpack --colors",
    "buildprod": "cross-env NODE_ENV=production webpack --colors",
    "dev": "webpack --watch --colors"
  },

用于生产的反应webpack包

1 个答案: