webpack--css、html 和 js 代码的常用处理

前言

　　本文来总结下webpack中 css、js、html 代码常见的处理方式，学习笔记仅供参考。

正文

　　1、css样式文件处理

　　（1）提取css为一个单独的文件

　　在我们前面学习了webpack的基础上，我们知道webpack在打包之后把css样式文件放在了js中，这样导致文件比较混乱，我们这一步需要将css样式文件打包成一个单独的文件，即从js中抽取出来。

　　首先需要一个基本的weback环境，然后安装MiniCssExtractPlugin这个插件，命令如下：

npm  i mini-css-extract-plugin -D

　　然后在webpack.config.js中添加如下配置：

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
// 配置loader
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          // "style-loader", // 创建style标签将样式放入
          //这个loader取代style-loader ,作用是将提取js中的css成单独的文件
          MiniCssExtractPlugin.loader,
          "css-loader", // 将css文件整个到js中
        ],
      },
    ],
  },
  // 配置plugin
  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html",
    }),
    new MiniCssExtractPlugin({
      // 对输出的文件进行重命名
      filename:"css/build.css"
    }),
  ],

　　执行webpack打包命令，会发现css文件被单独打包在了css目录下的main.css文件中。

　　（2）css 兼容性处理

　　在进行css兼容性处理的时候，需要用到 postcss ,需要执行下面命令下载对应的 loader

    npm i postcss-loader postcss-preset-env -D

　　然后在webpack.config.js如下配置

const { resolve } = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// 设置node环境变量：
process.env.NODE_ENV="development"
module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "build.js",
    path: resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          // "style-loader", // 创建style标签将样式放入
          //这个loader取代style-loader ,作用是将提取js中的css成单独的文件
          MiniCssExtractPlugin.loader,
          "css-loader", // 将css文件整个到js中
          /* CSS兼容性处理：postcss ==>postcss-loader postcss-preset-env
          帮助postcss扎到packae.json 中browserslist里的配置，通过配置加载指定的css兼容样式
          "browserlist":{
            // 开发环境==》设置node环境变量：process.env.NODE_ENV="development"
              "development":[
                "last 1 chrome version",
                "last 1 firefox version",
                "last 1 safari version"
              ],
              // 生产环境 默认是生产环境
              "production":[
                ">0.2%",
                "not dead",
                "not op_mini all"
              ]
            }*/
          // 使用loader的默认配置
          // post-loader
          // 修改loader配置
          {
            loader:"postcss-loader",
            options:{
              ident:"postcss",
              plugins:()=>{
                require("postcss-preset-env")
              }
            }
          }
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./index.html",
    }),
    new MiniCssExtractPlugin({
      // 对输出的文件进行重命名
      filename:"css/build.css"
    }),
  ],
  mode: "development",
};

　　这里如果出现了以下的报错，是因为postcss-loader这个版本不支持在webpack.config.js文件中这么写，我们可以换一种书写方式

　　在根目录下新建postcss.config.js文件，加入如下代码，然后注释了postcss-loader中的options对象

module.exports={
    ident:"postcss",
    plugins:()=>{
        require("postcss-preset-env")
      }
}

　　执行打包命令webpack 发现打包之后的css代码会出现前缀等兼容性处理

　　（3）css代码压缩处理

　　生产环境经常用到css代码压缩处理，这里需要用到 optimize-css-assest-webpack-plugin 插件，下面命令安装

    npm i optimize-css-assets-webpack-plugin -D

　　然后在webpack.config.js 中添加如下配置

const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin")// 引入
    // 插件配置添加
  plugins: [
    // css 代码压缩插件
    new OptimizeCssAssetsWebpackPlugin()
  ],

　　执行webpack命令，发现css代码被压缩成为一行。

　　2、JavaScript的代码处理

　　（1）JS 代码的语法检查

　　开发中为了规范大家的 js 代码，经常用到语法检查 eslint-loader ,这个loader依赖于 eslint库，同时只检查源代码，不会对webpack.config.js 中的代码规范检查，但是需要设置语法检查的规则，常用 airbnb 作为检查规则。首先下载依赖：

    npm i eslint-loader eslint eslint-config-airbnb-base eslint-plugin-import -D

　　在package.json中添加配置eslintConfig：

  "eslintConfig": {
    "extends": "airbnb-base"
  }

　　在webpack.config.js 中配置 loader

     {
        test: /\.js$/,
        exclude: /node_modules/, // 排除node_modules
        loader: "eslint-loader",
        options: {
          fix: true,// 自动修复eslint错误
        },
      },

　　执行webpack打包命令，会发现我们的 js 代码进行了规范处理。

　　（2）JS 的兼容性处理

　　ES6 的一些语法在某些浏览器中并不支持，需要做兼容性处理。需要用到babel-loader 、@babel/core两个核心库，首先下载依赖

    npm i babel-loader @babel/core  -D

　　1、基本的js兼容处理：需要用到 @babel/preset-env，安装依赖

    npm i @babel/preset-env  -D

　　然后在webpack.config.js 中配置 loader

      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/, // 排除node_modules
        options: {
          // 预设：指示babel做哪些兼容性处理
          presets: ["@babel/presets-env"],
        },
      },

　　问题：不能兼容promise等高级语法。

　　2、全部的js兼容处理@babel/polyfill

    npm i  @babel/polyfill  -D

　　然后在入口文件中引入即可

    import "@babel/polyfill"

　　问题：会把所有的js兼容性处理的代码都引入进来，打包之后代码体积较大

　　3、按需加载兼容性处理 core-js

    npm i core-js -D

　　然后在webpack.config.js 中配置 loader,这里需要注释了第二步的全部兼容性处理。

      {
        test: /\.js$/,
        loader: "babel-loader",
        exclude: /node_modules/, // 排除node_modules
        options: {
          // 预设：指示babel做哪些兼容性处理
          presets: [
            "@babel/presets-env",
            {
              useBuiltins: "usage", // 按需加载
              corejs: {
                version: 3, // 指定corejs版本
              },
              targets: {
                // 指定兼容到哪些浏览器
                chorme: "60",
                firefox: "60",
                ie: "9",
                safiri: "10",
                edge:"17",
              },
            },
          ],
        },
      },

　　（3）JS 代码的压缩

　　JS的代码压缩webpack 本身就会执行，只需要将 mode 设置为生产模式即可。webpack本身的 UglifyJsPlugin 会自动执行压缩任务。

　　webpack.cofig.js中配置mode

      mode: "production",

　　3、html代码的压缩处理

　　只需要配置HtmlWebpackPlugin即可。

　　webpack.cofig.js中配置HtmlWebpackPlugin。

    new HtmlWebpackPlugin({
      template: "./index.html",
      minify: {
        // 移除空格
        collapseWhitespace: true,
        // 移除注释
        removeComments: true,
      },
    }),

写在最后

　　以上就是本文的全部内容，希望给读者带来些许的帮助和进步，方便的话点个关注，小白的成长之路会持续更新一些工作中常见的问题和技术点。