• webpack构建vue项目 基础02 之 css、scss、postcss、autoprefixer、去掉多余的css相关配置

    目录

    webpack构建vue项目 基础02 之 css、scss、postcss、autoprefixer、去掉多余的css相关配置

    01：webpack构建vue项目 基础02 之 css的配置 （ 实现css压缩，css分割，css代码解析）

    package.json

    • 运行npm i
    • 需要安装以下依赖
      style-loader 、css-loader、mini-css-extract-plugin、optimize-css-assets-webpack-plugin、html-webpack-plugin
      "devDependencies": {
    "webpack": "^4.29.6",
    "webpack-cli": "^3.2.3",
    "style-loader": "^0.23.1",
    "css-loader": "^2.1.0",
    "mini-css-extract-plugin": "^0.5.0",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "html-webpack-plugin": "^3.2.0"
  }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    webpack.config.js

    const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 将 css 单独打包成文件
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin') // 压缩 css
const HtmlWebpackPlugin = require('html-webpack-plugin') // 自动引入文件 插件
module.exports = {
  // webpack执行打包的唯一入口
  entry: {
    main: [path.resolve(__dirname, './src/main.js')],
  },
  // 打包的输入
  output: {
    // 将所有依赖的模块合并输出到main_xxxxxx.js，xxxxxx为随机生成的6位hash码
    //当内容有改变时，hash会变化，防止缓存原因导致修改不更新
    filename: 'js/[name]_[contenthash:6].js',
    // 输出文件的存放路径， 必须是绝对路径
    path: path.resolve(__dirname, "./dist")
  },
  // loader相关配置
  module: {
    rules: [{
      test: /\.css$/, // 针对 .css 后缀的文件设置 loader
      use: [
        'style-loader',
        {
          loader: MiniCssExtractPlugin.loader
        },
        'css-loader'
      ]
    }]
  },
  plugins: [
    // 分割css
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    }),
    // 压缩css
    new OptimizeCssAssetsPlugin({
      assetNameRegExp: /\.optimize\.css$/g,
      cssProcessor: require('cssnano'),
      cssProcessorPluginOptions: {
        preset: ['default', {
          discardComments: {
            removeAll: true
          }
        }],
      },
      canPrint: true
    }),
    // 自动生成html ( 于打包后 dist目录下的 双击在浏览器显示 )
    new HtmlWebpackPlugin({
      // 打包输出HTML
      title: '自动生成 HTML',
      minify: {
        // 压缩 HTML 文件
        removeComments: true, // 移除 HTML 中的注释
        collapseWhitespace: true, // 删除空白符与换行符
        minifyCSS: true // 压缩内联 css
      },
      filename: 'index.html', // 生成后的文件名
      template: 'index.html', // 根据此模版生成 HTML 文件
      // chunks: ['main'] // entry中的 app 入口才会被打包
    }),
  ]
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65

    main.js 与 main.css

    main.js
console.log("main");
import {age} from "./person"
console.log("age",age);
import "./css/main.css"

main.css
body {
  background: yellow;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

    项目目录 / index.html （ npm run dev ）

    • 运行脚本：npm run dev
    • 引入 css 与 js文件
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./dist/main.css">
</head>
<body>
  <script src="./dist/js/main_451579.js"></script>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 效果
      在这里插入图片描述

    dist /index.html ( npm run build 打包后的效果 )

    运行 npm run build 打包指令
在dist目录之中生成以下文件

    • 1
    • 2
    • 在这里插入图片描述
    • 效果
      在这里插入图片描述

    02：webpack构建vue项目 基础02 之 scss的配置

    package.json

      "devDependencies": {
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0",
  }

    • 1
    • 2
    • 3
    • 4

    main.scss

    $bgColor: red !default;
html {
  p {
    background-color: $bgColor;
  }
  .ppp {
    display: flex;
    justify-content: flex-end;
    color: #fff;
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11

    index.html

    • 与 为了 npm run dev （ 查看效果 ）
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./dist/main.css">
</head>
<body>
  <script src="./dist/js/main_efcf6d.js"></script>
  <p class="ppp">
    我是pppp
    <span>1</span><span>2</span><span>3</span>
  </p>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    webpack.config.js

      // loader相关配置
  module: {
    rules: [
      // {
      //   test: /\.css$/, // 针对 .css 后缀的文件设置 loader
      //   use: [
      //     'style-loader',
      //     {
      //       loader: MiniCssExtractPlugin.loader
      //     },
      //     'css-loader'
      //   ]
      // },
      {
        test: /\.(scss|css)$/, // 针对 .scss 或者 .css 后缀的文件设置 loader
        use: [{
            loader: MiniCssExtractPlugin.loader
          },
          'css-loader',
          'sass-loader' // 使用 sass-loader 将 scss 转为 css
        ]
      }
    ]
  },

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    效果

    • npm run build
      在这里插入图片描述

    03：webpack构建vue项目 基础02 之 postcss、autoprefixer的配置 ( PostCSS自动补全浏览器前缀 )

    package.json

    • 这个需要加 browserslist
    {
  "devDependencies": {
    "css-loader": "^2.1.0",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.5.0",
    "node-sass": "^4.11.0",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "postcss-loader": "^3.0.0",
    "autoprefixer": "9.0.0",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.2.3",
    "clean-webpack-plugin": "^4.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 version",
    "not ie <= 8"
  ]
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    postcss.config.js ( 根目录下 创建)

    module.exports = {
  plugins: [require('autoprefixer')]
}

    • 1
    • 2
    • 3

    webpack.config.js

    const path = require("path");
module.exports = {
  // webpack执行打包的唯一入口
  entry: {
    main: [path.resolve(__dirname, './src/main.js')],
  },
  // 打包的输入
  output: {
    // 将所有依赖的模块合并输出到main_xxxxxx.js，xxxxxx为随机生成的6位hash码
    //当内容有改变时，hash会变化，防止缓存原因导致修改不更新
    filename: 'js/[name]_[contenthash:6].js',
    // 输出文件的存放路径， 必须是绝对路径
    path: path.resolve(__dirname, "./dist")
  },
  // loader相关配置
  module: {
    rules: [
      // {
      //   test: /\.css$/, // 针对 .css 后缀的文件设置 loader
      //   use: [
      //     'style-loader',
      //     // MiniCssExtractPlugin.loader,
      //     {
      //       loader: MiniCssExtractPlugin.loader
      //     },
      //     'css-loader'
      //   ]
      // },
      {
        test: /\.(sa|sc|c)ss$/, // 针对 .sass .scss 或者 .css 后缀的文件设置 loader
        use: [{
            loader: MiniCssExtractPlugin.loader
          },
          'css-loader',
          'postcss-loader', // 使用 postcss 为 css 加上浏览器前缀
          'sass-loader' // 使用 sass-loader 将 scss 转为 css
        ]
      }
    ]
  },
  plugins: [
  ]
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43

    index.html ( npm run dev 时 需要引入css与js)

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./dist/main.css">
</head>
<body>
  <script src="./dist/js/main_75bfc0.js"></script>
  <p class="ppp">
    我是pppp
    <span>1</span><span>2</span><span>3</span>
  </p>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    效果

    在这里插入图片描述
    在这里插入图片描述

    04：webpack构建vue项目 基础02 之 去掉多余的css相关配置 （ 注意点：css压缩不起效果了？ ）

    package.json

      "devDependencies": {
    "glob-all": "^3.1.0",
    "purify-css": "^1.2.5",
    "purifycss-webpack": "^0.7.0"
  },

    • 1
    • 2
    • 3
    • 4
    • 5

    index.scss

    $bgColor: red !default;
html {
  p {
    background-color: $bgColor;
  }
  .ppp {
    display: flex;
    justify-content: flex-end;
    color: #fff;
    font-size: 16px;
  }
  .box {
    width: 100px;
    height: 100px;
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    webpack.config.js

    const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 将 css 单独打包成文件
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin') // 压缩 css
const HtmlWebpackPlugin = require('html-webpack-plugin') // 自动引入文件 插件
const {
  CleanWebpackPlugin
} = require('clean-webpack-plugin') // 版本为2.0.0 不需要 { CleanWebpackPlugin } 结构！ 大于2.0.0则需要

// 去掉 不加载的css
const PurifyCSS = require('purifycss-webpack')
const glob = require('glob-all')

module.exports = {
  // webpack执行打包的唯一入口
  entry: {
    main: [path.resolve(__dirname, './src/main.js')],
  },
  // 打包的输入
  output: {
    // 将所有依赖的模块合并输出到main_xxxxxx.js，xxxxxx为随机生成的6位hash码
    //当内容有改变时，hash会变化，防止缓存原因导致修改不更新
    filename: 'js/[name]_[contenthash:6].js',
    // 输出文件的存放路径， 必须是绝对路径
    path: path.resolve(__dirname, "./dist")
  },
  // loader相关配置
  module: {
    rules: [
      // {
      //   test: /\.css$/, // 针对 .css 后缀的文件设置 loader
      //   use: [
      //     'style-loader',
      //     // MiniCssExtractPlugin.loader,
      //     {
      //       loader: MiniCssExtractPlugin.loader
      //     },
      //     'css-loader'
      //   ]
      // },
      {
        test: /\.(sa|sc|c)ss$/, // 针对 .sass .scss 或者 .css 后缀的文件设置 loader
        use: [{
            loader: MiniCssExtractPlugin.loader
          },
          'css-loader',
          'postcss-loader', // 使用 postcss 为 css 加上浏览器前缀
          'sass-loader' // 使用 sass-loader 将 scss 转为 css
        ]
      }
    ]
  },
  plugins: [
    //默认情况下，此插件删除 webpack output.path目录中的所有文件，以及每次成功重建后所有未使用的 webpack 资产
    new CleanWebpackPlugin(),
    // 分割css
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    }),
    // 清除无用 css
    new PurifyCSS({
      paths: glob.sync([
        // 要做 CSS Tree Shaking 的路径文件
        path.resolve(__dirname, './*.html'), // 请注意，我们同样需要对 html 文件进行 tree shaking
        path.resolve(__dirname, './src/*.js')
      ])
    }),
    // 压缩css
    new OptimizeCssAssetsPlugin({
      assetNameRegExp: /\.optimize\.css$/g,
      cssProcessor: require('cssnano'),
      cssProcessorPluginOptions: {
        preset: ['default', {
          discardComments: {
            removeAll: true
          }
        }],
      },
      canPrint: true
    }),
    // 自动生成html ( 于打包后 dist目录下的 双击在浏览器显示 )
    new HtmlWebpackPlugin({
      // 打包输出HTML
      title: '自动生成 HTML',
      minify: {
        // 压缩 HTML 文件
        removeComments: true, // 移除 HTML 中的注释
        collapseWhitespace: true, // 删除空白符与换行符
        minifyCSS: true // 压缩内联 css
      },
      filename: 'index.html', // 生成后的文件名
      template: 'index.html', // 根据此模版生成 HTML 文件
      // chunks: ['main'] // entry中的 app 入口才会被打包
    }),
  ]
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96

    效果

    • 这是未配置 去掉无用css -> PurifyCSS 操作 （ 有压缩效果，有无用的 .box样式）
      在这里插入图片描述
    • 这是配置 去掉无用css -> PurifyCSS 操作 （ 无压缩效果，无无用的 .box样式）
  • 相关阅读:
    C++ Reference: Standard C++ Library reference: C Library: cctype: isalpha
    禅道16.5升级17.3
    《时代》专访ChatGPT之父：人工智能影响经济还需要很多年
    每日一题AC
    依赖注入(DI)，自动配置，集合注入
    【MISRA C 2012】Rule 4.2 不应该使用三连符
    面向对象的三大特性之——继承
    LeetCode 80. 删除有序数组中的重复项 II
    关于华为笔记本谷歌浏览器（chrome）默认启动页为360搜索的解决方法
    662. 二叉树最大宽度（难度：中等）
  • 原文地址：https://blog.csdn.net/weixin_43845137/article/details/126185098