账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    webpack 两种打包模式,development生成.css 文件,production不生成,这是为什么?
    34
    0

    如下代码,相同的 webpack.config.js 文件,使用--mode development 生成.css 文件,使用-- mode production 不生成,这是为什么?如果我想使用--mode production 生成.css 文件我该怎么做?

    "build:dev": "cross-env BABEL_ENV=umd webpack --mode development --config webpack.config.js",
    "build:umd": "cross-env BABEL_ENV=umd webpack --mode production --config webpack.config.js",
    

    webpack.config.js

    const path = require("path");
    const webpack = require("webpack");
    const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
    const MiniCssExtractPlugin = require("mini-css-extract-plugin");
    const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
    const nodeExternals = require("webpack-node-externals");
    const WebpackMd5Hash = require("webpack-md5-hash");
    const HtmlWebpackPlugin = require("html-webpack-plugin");
    const { CleanWebpackPlugin } = require("clean-webpack-plugin");
    
    const resolve = dir => path.join(__dirname, ".", dir);
    const isProd = process.env.NODE_ENV === "production";
    const { version, name, description } = require("./package.json");
    
    module.exports = {
      entry: { [name]: "./src/index.js" },
      output: {
        // path: resolve("dist"), // 输出目录
        path: path.resolve(__dirname, "dist"),
        filename: "[name].min.js",
        umdNamedDefine: true, // 是否将模块名称作为 AMD 输出的命名空间
        //不加下面几行,被引用会被报错
        libraryTarget: "umd", // 采用通用模块定义
        library: name
      },
      devtool: "#source-map",
      module: {
        rules: [
          {
            test: /\.(sa|sc|c)ss$/,
            use: ["style-loader", MiniCssExtractPlugin.loader, "css-loader", "postcss-loader", "sass-loader"]
          },
          {
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: {
              loader: "babel-loader"
            }
          }
        ]
      },
      resolve: {
        enforceExtension: false,
        extensions: [".js", ".jsx", ".json", ".less", ".css"]
      },
      // 注意:本地预览的时候要注释,否则报 require undefined
      // https://stackoverflow.com/questions/45818937/webpack-uncaught-referenceerror-require-is-not-defined
      externals: [nodeExternals()],
      plugins: [
        new CleanWebpackPlugin({
          cleanOnceBeforeBuildPatterns: [path.resolve(__dirname, "dist"), path.resolve(__dirname, "es"), path.resolve(__dirname, "lib")]
        }),
        new MiniCssExtractPlugin({
          filename: "[name].css"
        }),
        new WebpackMd5Hash()
      ],
      //压缩js
      optimization: {
        minimizer: [
          new UglifyJsPlugin({
            cache: true,
            parallel: true,
            sourceMap: true
          }),
          new OptimizeCssAssetsPlugin({
            assetNameRegExp: /\.css\.*(?!.*map)/g, //注意不要写成 /\.css$/g
            cssProcessor: require("cssnano"),
            cssProcessorOptions: {
              discardComments: { removeAll: true },
              safe: true,
              autoprefixer: false
            },
            canPrint: true
          })
        ]
      },
      node: {
        setImmediate: false,
        dgram: "empty",
        fs: "empty",
        net: "empty",
        tls: "empty",
        child_process: "empty"
      }
    };
    
    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 10 元积分
        全部回答
    • 0
    • 走太远 普通会员 1楼
      502 Bad Gateway

      502 Bad Gateway


      nginx
    更多回答
    网站公告
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部