Question

我通过使用type: new GraphQLList(UserType),初始化webpack来创建了React应用，然后手动修改了脚本和webpack配置文件。我文件的内容如下：

package.json

npm init -y

webpack.config.js

{
  "name": "arw.ecahangirov",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development --watch ./frontend/src/index.js --output ./frontend/static/frontend/main.js",
    "build": "webpack --mode production ./frontend/src/index.js --output ./static/frontend/main.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "css-loader": "^3.2.0",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "weak-key": "^1.0.1",
    "webpack": "^4.39.1",
    "webpack-cli": "^3.3.6"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "materialize-css": "^1.0.0-rc.2",
    "moment": "^2.24.0",
    "style-loader": "^1.0.0"
  }
}

问题是，当我运行const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); module.exports = { module: { rules: [ { test: /\.jsx?$/, exclude: /node_modules/, use: { loader: "babel-loader" } }, { test: /\.css$/, use: ["style-loader", "css-loader"] } ] }, resolve: { extensions: [".js", ".jsx", ".css"] }, optimization: { minimizer: [ new UglifyJsPlugin({ include: /\.js$/ }) ] } };时，webpack不会缩小输出的npm run build文件。结果为main.js文件大小，通过打开输出文件，我观察到该文件是多行的，并且还包含注释。尽管我以716kb开头，为什么webpack在这种情况下不关心最小化？

Answer 1

您必须为CSS指定一个缩小器。

将其加载到您的webpack配置文件顶部

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

到规则块：

rules: [
  //...
  {
    test: /\.(sa|sc|c)ss$/,
    use: [{loader: MiniCssExtractPlugin.loader},
      'css-loader',
      'postcss-loader',
      'sass-loader',
    ],
  },
  //...
]

对于优化块：

optimization: { 
  minimizer: new OptimizeCSSAssetsPlugin({})
}

到插件块：

plugins: [
  //...
  new MiniCssExtractPlugin({
    filename: [name].[hash].css',
    chunkFilename: '[id].[hash].css',
  }),
  //...
]

您需要先加载该插件

npm install --save-dev mini-css-extract-plugin
npm install --save-dev optimize-css-assets-webpack-plugin

您可以找到有效的配置here

Webpack生产模式不会缩小js文件

1 个答案: