Question

我有一些包含在index.html中的静态CSS文件像<link rel="stylesheet" type="text/css" href="/static/css/style.css" /> 它们存储在静态文件夹中，当我构建生产代码时，CopyWebpackPlugin将所有内容从 static 文件夹复制到 public_html / static 文件夹我想要的是找到缩小在 static / css 文件夹中的CSS文件，如果可行的话，可以将5个文件分成两个文件。

目前，我有一个配置，用于缩小文件夹中的一个文件

"use strict";

const config = require("../config");
const path = require("path");

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

function resolve(dir) {
  return path.join(__dirname, "..", dir);
}

module.exports = {
  context: path.resolve(__dirname, "../"),
  entry: {
    app: "./static/css/owl.carousel.css"
  },

  output: {
    path: "./public_html/static/css",
    filename: "[name].css",
    publicPath:
      process.env.NODE_ENV === "production"
        ? config.build.assetsPublicPath
        : config.dev.assetsPublicPath
  },
  optimization: {
    minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css"
      //chunkFilename: "[id].css"
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              hmr: process.env.NODE_ENV === "development"
            }
          },
          "css-loader",
          "postcss-loader",
          "sass-loader"
        ]
      }
    ]
  }
};

因错误而失败

html \ node_modules \ mini-css-extract-plugin \ dist \ index.js：23       createHash       ^

TypeError：无法解构'undefined'的属性createHash或   '空值'。       在对象。（C：\ Users \ Ilyas \ Documents \ hipages \ html \ node_modules \ mini-css-extract-plugin \ dist \ index.js：25：5）       在Module._compile（内部/模块/cjs/loader.js:689:30）       在Object.Module._extensions..js（内部/模块/cjs/loader.js:700:10）       在Module.load（internal / modules / cjs / loader.js：599：32）       在tryModuleLoad（内部/模块/cjs/loader.js:538:12）       在Function.Module._load（内部/模块/cjs/loader.js:530:3）       在Module.require（internal / modules / cjs / loader.js：637：17）       在要求时（内部/模块/cjs/helpers.js:20:18）       在对象。（C：\ Users \ Ilyas \ Documents \ hipages \ html \ node_modules \ mini-css-extract-plugin \ dist \ cjs.js：3：18）       在Module._compile（内部/模块/cjs/loader.js:689:30）       在Object.Module._extensions..js（内部/模块/cjs/loader.js:700:10）       在Module.load（internal / modules / cjs / loader.js：599：32）       在tryModuleLoad（内部/模块/cjs/loader.js:538:12）       在Function.Module._load（内部/模块/cjs/loader.js:530:3）       在Module.require（internal / modules / cjs / loader.js：637：17）       在要求时（internal / modules / cjs / helpers.js：20：18）

根据Vue CLI，它具有类似 webpack.base.conf.js ， webpack.prod.conf.js 的配置，我创建了一个单独的 minifyCss .conf.js 我合并在 webpack.prod.conf.js 文件

中

"use strict";
const path = require("path");
const utils = require("./utils");
const webpack = require("webpack");
const config = require("../config");
const merge = require("webpack-merge");
const baseWebpackConfig = require("./webpack.base.conf");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const OptimizeCSSPlugin = require("optimize-css-assets-webpack-plugin");

const UglifyJsPlugin = require("uglifyjs-webpack-plugin");

const minifyCssConfig = require("./minifyCss.conf");

const env =
  process.env.NODE_ENV === "testing"
    ? require("../config/test.env")
    : require("../config/prod.env");

const webpackConfig = merge(baseWebpackConfig, minifyCssConfig, {
  name: "mobile",
  module: {
    rules: utils.styleLoaders({
      sourceMap: config.build.productionSourceMap,
      extract: true,
      usePostCSS: true
    })
  },

任何人都可以看看并告诉我我一直在使用的错误原因吗？ mini-css-extract-plugin？谢谢

Answer 1

我正在使用

"webpack": "^4.29.6",
"webpack-cli": "^3.3.0"

下面是我的webpack配置。

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
  plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        }),
  ],
   module: {
        rules: [{
                test: /\.scss$/,
                use: [
                    'style-loader',
                    MiniCssExtractPlugin.loader,
                    {
                        loader: "css-loader",
                        options: {
                            minimize: true,
                            sourceMap: true
                        }
                    },
                    {
                        loader: "sass-loader"
                    }
                ]
            }
        ]
    }
}

希望有帮助。

通过Vue CLI和webpack4缩小index.html中包含的css文件

1 个答案: