Сократите CSS-файлы, включенные в index.html, через Vue CLI и webpack4. - PullRequest
Новая
       53

Сократите CSS-файлы, включенные в index.html, через Vue CLI и webpack4.

0 голосов
/ 12 мая 2019

У меня есть несколько статических CSS-файлов, которые включены в index.html как <link rel="stylesheet" type="text/css" href="/static/css/style.css" /> которые хранятся в статической папке, и когда я создаю производственный код, CopyWebpackPlugin копирует все из папки static в папку public_html / static Я хочу найти css-файлы в папке static / css minify и, если это возможно, можно разбить 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 \ мини-CSS-экстракт-плагин \ \ index.js расстояние: 23 createHash ^

TypeError: Невозможно уничтожить свойство createHash из 'undefined' или 'ноль'. на объекте. (C: \ Users \ Ильяс \ Documents \ hipages \ HTML \ node_modules \ мини-CSS-экстракт-плагин \ DIST \ index.js: 25: 5) в Module._compile (внутренний / modules / cjs / loader.js: 689: 30) в Object.Module._extensions..js (внутренний / modules / cjs / loader.js: 700: 10) в Module.load (внутренний / modules / cjs / loader.js: 599: 32) в tryModuleLoad (внутренняя / modules / cjs / loader.js: 538: 12) в Function.Module._load (внутренняя / modules / cjs / loader.js: 530: 3) в Module.require (внутренняя / modules / cjs / loader.js: 637: 17) по требованию (внутренний / modules / cjs / helpers.js: 20: 18) на объекте. (C: \ Users \ Ильяс \ Documents \ hipages \ HTML \ node_modules \ мини-CSS-экстракт-плагин \ \ cjs.js расстояние: 3: 18) в Module._compile (внутренний / modules / cjs / loader.js: 689: 30) в Object.Module._extensions..js (внутренний / modules / cjs / loader.js: 700: 10) в Module.load (внутренний / modules / cjs / loader.js: 599: 32) в tryModuleLoad (внутренняя / modules / cjs / loader.js: 538: 12) в Function.Module._load (внутренняя / modules / cjs / loader.js: 530: 3) в Module.require (внутренняя / modules / cjs / loader.js: 637: 17) по требованию (внутренний / modules / cjs / helpers.js: 20: 18)

В соответствии с Vue CLI он имеет такие настройки, как webpack.base.conf.js , webpack.prod.conf.js , и я создал отдельный minifyCss.conf .js который я объединяю в webpack.prod.conf.js file 

"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 ? Спасибо

1 Ответ

0 голосов
/ 12 мая 2019

Я использую 

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

Ниже приведен мой конфиг веб-пакета. 

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"
                    }
                ]
            }
        ]
    }
}

Надеюсь, это поможет.

...