webpack--css、html 和 js 程式碼的常用處理

丶Serendipity丶發表於2021-12-02
WebCSSHTMLJS

 

前言

　　本文來總結下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,
      },
    }),

寫在最後

　　以上就是本文的全部內容，希望給讀者帶來些許的幫助和進步，方便的話點個關注，小白的成長之路會持續更新一些工作中常見的問題和技術點。

 

相關文章