首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >工具认为我的站点处于开发模式

工具认为我的站点处于开发模式
EN

Stack Overflow用户
提问于 2019-05-16 23:14:07
回答 1查看 1.4K关注 0票数 1

我想看看我从使用非开发版本的所有东西中得到了多大的速度提升,所以我使用我的“产品”webconfig构建了我的站点。但是开发工具仍然告诉我它处于“开发”模式。

代码语言:javascript
复制
This page is using the development build of React. 

const merge = require("webpack-merge");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const common = require("./webpack.common.js");

module.exports = merge(common, {
  // Provides process.env.NODE_ENV with value production.
  // Enables FlagDependencyUsagePlugin, FlagIncludedChunksPlugin,
  // ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin,
  // SideEffectsFlagPlugin and UglifyJsPlugin.
  mode: "production",
  // see https://webpack.js.org/configuration/optimization/
  optimization: {
    // minimize default is true
    minimizer: [
      // Optimize/minimize CSS assets.
      // Solves extract-text-webpack-plugin CSS duplication problem
      // By default it uses cssnano but a custom CSS processor can be specified
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  module: {
    rules: [
      {
        test: /\.(sa|sc|c)ss$/,
        // only use MiniCssExtractPlugin in production and without style-loader
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
      }
    ]
  },
  plugins: [
    // Mini CSS Extract plugin extracts CSS into separate files.
    // It creates a CSS file per JS file which contains CSS.
    // It supports On-Demand-Loading of CSS and SourceMaps.
    // It requires webpack 4 to work.
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    }),
    new BundleAnalyzerPlugin()
  ]
});

在我的package.json里

代码语言:javascript
复制
  "scripts": {
    "dev": "cross-env NODE_ENV=dev webpack-serve --config webpack.dev.js --open",
    "prod": "cross-env NODE_ENV=prod  webpack -p --config webpack.prod.js",
    "qa": "cross-env NODE_ENV=QA webpack --config webpack.prod.js"
  },
EN

回答 1

Stack Overflow用户

发布于 2019-05-17 01:09:18

我越来越相信,您的问题源于将NODE_ENV设置为package.json中的prod。我认为您应该将其设置为production,或者允许webpack使用webpack配置中的mode选项在内部设置它。

react脚本包用于建筑在github项目中的facebook/react项目中显示了大量检查production的值,而不是prod

下面是react的index.js文件-is,react源中的许多其他项目都遵循相同的模式:

代码语言:javascript
复制
'use strict';

if (process.env.NODE_ENV === 'production') {
  module.exports = require('./cjs/react-is.production.min.js');
} else {
  module.exports = require('./cjs/react-is.development.js');
}

我会尝试将您的构建脚本更改为:

代码语言:javascript
复制
"prod": "cross-env NODE_ENV=production webpack -p --config webpack.prod.js",

甚至让webpack -p自动设置它:

代码语言:javascript
复制
"prod": "cross-env webpack -p --config webpack.prod.js",
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/56177699

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档