526互联

webpack5_使用webpack编译scss文件为css文件并实现css文件的兼容性和压缩处理

发布时间 2023-08-22 21:46:06作者: Steperouge

webpack5_使用webpack编译scss文件为css文件并实现css文件的兼容性和压缩处理

  • 现实问题: 为了编写博客园的博客样式, 我写了一个scss文件, 但是因为博客园的样式编辑里只接受css样式, 所以乘此机会顺便复习一下webpack5实现对scss(sass)文件的处理

下载最新版webpack

npm i webpack webpack-cli -g

步骤1: 编写webpack.config.js文件基本配置

  • webpack.config.js基本配置编写如下

    • const { resolve } = require('path')
module.exports = {
  entry: { // 入口文件
    main: './index.js'
  },
  output: { // 出口
    filename: 'bundle.js', // 输出文件名
    path: resolve(__dirname, 'dist') // 输出文件路径配置
  },
  mode: 'development'
}

    • entry对象的main属性值是入口文件, 所有的外部需要处理的文件都需要在这个文件里引入; 上面代码的入口文件是在webpack.config.js同目录下的index.js文件

    • output对象的path值是编译出来的文件需要存放的目录, 上面代码的意思是存放在webpack.config.js所在目录下的dist目录中, 如果没有这个目录, webpack会自动创建该目录.

    • output对象的filename值是编译出来的js文件的命名, 如果只是对scss文件进行编译的话, 编译后的css文件就会被混入这个js文件中进行输出

步骤2: 编译scss文件

  • 因为webapck自带功能只能处理js与json文件, 因此处理css文件需要css-loader, sass-loader是编译sass/scss文件用的

  • 下载css-loader, sass-loader文件

    • sass-loader自带dart-sass, 所以不需要额外再安装dart-sass

    • npm i css-loader sass-loader -d

    • 需要注意必须安装在当前项目中

  • webpack.config.js编译sass/scss文件配置如下

    • const { resolve } = require('path')
module.exports = {
  entry: { // 入口文件
    main: './index.js'
  },
  output: { // 出口
    filename: 'bundle.js', // 输出文件名
    path: resolve(__dirname, 'dist') // 输出文件路径配置
  },
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          'css-loader',
          'sass-loader',
        ],
      },
    ],
  },
  mode: 'development'
}

    • 当然此时还必须在index.js文件中引入我们要编译的scss文件

      • import './style/main.scss'

    • 执行webpack命令, 会看到dist目录下的bundle.js文件, 被编译后的scss文件被混入了这个文件里

步骤3: 与编译文件分离独立成单独的css文件

  • npm i mini-css-extract-plugin -g
    • 被引入的插件可以安装在全局目录中, 但loader必须安装在当前目录下

  • webpack.config.js分离css文件配置

    • const { resolve } = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
  entry: { // 入口文件
    main: './index.js'
  },
  output: { // 出口
    filename: 'bundle.js', // 输出文件名
    path: resolve(__dirname, 'dist') // 输出文件路径配置
  },
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader',
        ],
      },
    ],
  },
  mode: 'development',
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[contenthash:10].css' // 生成的文件以10位hash值为文件名
    })
  ]
}

    • 如上代码所示, 引入插件后, 在plugins中注册插件, 并配置分离后的css文件名, 同时在rules中插件被调用在css-loader之后.

    • 执行编译命令, css文件会被分离放置在出口目录下

步骤4: 处理编译好的css文件的兼容性

  • 除非特别要求, 我一般都会在项目里添加user-select属性, 它是一个很特殊的属性, 因为针对不同的浏览器要对它做不同的适配

  • 下载

    • npm install postcss-loader postcss-flexbugs-fixes postcss-preset-env postcss-normalize autoprefixer postcss-nested --save-dev

  • 在webpack.config.js同级目录中添加一个postcss.config.js文件中

    • postcss.config.js

      • module.exports = {
    ident: 'postcss',
    plugins: [
        require('postcss-flexbugs-fixes'),
        require('postcss-preset-env')({
            autoprefixer: {
                flexbox: 'no-2009',
            },
            stage: 3,
        }),
        require('postcss-normalize')(),
        require('postcss-nested')
    ],
    sourceMap: true
}

  • 在package.json文件中添加以下属性

    •   "browserslist": [
    "last 1 version",
    "> 1%",
    "IE 10"
  ]

  • webpack.config.js兼容处理css文件

    • const { resolve } = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
  entry: { // 入口文件
    main: './index.js'
  },
  output: { // 出口
    filename: 'bundle.js', // 输出文件名
    path: resolve(__dirname, 'dist') // 输出文件路径配置
  },
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'sass-loader',
        ],
      },
    ],
  },
  mode: 'development',
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[contenthash:10].css' // 生成的文件以10位hash值为文件名
    })
  ]
}

    • 如上代码: 只需要在rules中添加一个postcss-laoder字符串即可, 执行编译代码, 如果文件里写有user-select属性的话, 就可以看到编译出来的文件里这个属性发生了明显的变化.

步骤5: 压缩css代码

  • 下载

    • npm install css-minimizer-webpack-plugin -g

  • webpack.config.js压缩css代码配置

    • const { resolve } = require('path')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const cssMinimizerPlugin = require("css-minimizer-webpack-plugin")
module.exports = {
  entry: { // 入口文件
    main: './index.js'
  },
  output: { // 出口
    filename: 'bundle.js', // 输出文件名
    path: resolve(__dirname, 'dist') // 输出文件路径配置
  },
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'sass-loader',
        ],
      },
    ],
  },
  optimization: {
    minimize: true,
    minimizer: [
      new cssMinimizerPlugin()
    ],
  },
  mode: 'development',
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[contenthash:10].css' // 生成的文件以10位hash值为文件名
    })
  ]
}

    • 如上代码所示, 执行引入, 和optimization配置后, 再执行编译, 就可以看到被压缩的css代码了