webpack 手摸手學習系列之 js 語法檢查、js 兼容性和壓縮 js 以及 html

一、webpack 進行 js 語法檢查 eslint

創建空文件夾，通過 npm init 命令初始化 package.json 文件，通過 npm install webpack webpack-cli -g 命令全局下載 webpack 和 webpack-cli，通過 npm install webpack webpack-cli -D 命令本地下載 webpack 和 webpack-cli，通過 npm i html-webpack-plugin 命令下載 html-webpack-plugin，通過 npm i eslint-loader eslint -D 命令下載 eslint-loader 和 eslint，通過 npm i eslint-config-airbnb-base eslint-plugin-import eslint -D 命令下載 eslint-config-airbnb-base 、eslint-plugin-import 和 eslint，eslint-config-airbnb-base 依賴於 eslint-plugin-import 和 eslint。
創建 src 文件夾，在裏面創建 index.js 和 index.html 文件，代碼如下所示：

index.js

function add(x, y) {
  return x + y;
}

console.log(add(2, 5));

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack</title>
</head>
<body>
    <h1>hello webpack</h1>
</body>
</html>

創建 webpack.config.js 文件，通過 require 引入 path 和 html-webpack-plugin 。entry 是入口文件，output 是出口文件，filename 是打包輸出後的文件名，path 是輸出路徑。module 是 loader 的配置，rules 是詳細的 loader 配置。第一個規則是匹配以 .js 結尾的文件，通過 exclude 不包括 node_modules，使用的 loader 是 eslint-loader，通過 options 進行配置，fix 爲 true，自動修復 eslint 的錯誤。js 的語法檢查使用 eslint-loader 和 eslint，只檢查自己寫的源代碼，第三方的庫是不用檢查的。plugins 裏面是一些插件配置，通過 new HtmlWebpackPlugin()，複製裏面的文件，並自動引入打包輸出的所有資源（JS/CSS），設置 mode 模式爲 development 開發模式，代碼如下所示：

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'eslint-loader',
                options: {
                    fix: true
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    mode: 'development'
}

eslint 並不知道要檢查什麼，所有就有 airbnb 風格指南，airbnb 需要使用 eslint-config-airbnb-base 這個庫，這個庫依賴於 eslint-plugin-import 和 eslint。所有需要在 package.json 中 eslintConfig 中設置檢查規則，設置 extends 爲 airbnb-base，代碼如下所示：

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

在命令行輸入 webpack 命令，資源就會進行打包，同時 js 也會進行語法檢查 eslint，並且自動校驗修復。

二、webpack 進行 js 兼容性處理

創建空文件夾，通過 npm init 命令初始化 package.json 文件，通過 npm install webpack webpack-cli -g 命令全局下載 webpack 和 webpack-cli，通過 npm install webpack webpack-cli -D 命令本地下載 webpack 和 webpack-cli，通過 npm i html-webpack-plugin 命令下載 html-webpack-plugin，通過 npm i babel-loader @babel/core @babel/preset-env -D 命令下載 babel-loader、@babel/core 和 @babel/preset-env，通過 npm i @babel/polyfill core-js -D 命令下載 @babel/polyfill 和 core-js。
創建 src 文件夾，在裏面創建 index.js 和 index.html 文件，代碼如下所示：

index.js

// import '@babel/polyfill';

const add = (x, y)  => {
  return x + y;
}

console.log(add(2, 5));


const promise = new Promise(resolve => {
  setTimeout(() => {
    console.log('定時器執行完了~');
    resolve();
  }, 1000);
});

console.log(promise);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack</title>
</head>
<body>
    <h1>hello webpack</h1>
</body>
</html>

創建 webpack.config.js 文件，通過 require 引入 path 和 html-webpack-plugin 。entry 是入口文件，output 是出口文件，filename 是打包輸出後的文件名，path 是輸出路徑。module 是 loader 的配置，rules 是詳細的 loader 配置。通過 test 匹配以 .js 文件結尾的文件，通過 exclude 不包括 node_modules，通過 loader 使用 babel-loader，通過 options 進行配置，presets 爲預設，指示 babel 做怎麼樣的兼容性處理，使用 babel/preset-env 這個預設。通過 useBuiltIns 按需加載，通過 corejs 指定 core-js 版本，通過 targets 指定兼容性做到哪個版本瀏覽器。js 兼容性處理需要使用到 babel-loader、@babel/core 和 @babel/preset-env。如果是基本 js 兼容性處理，需要使用 @babel/preset-env，但是隻能轉換基本語法，如promise高級語法不能轉換。如果使用全部 js 兼容性處理，需要使用 @babel/polyfill ，但是隻要解決部分兼容性問題，但是將所有兼容性代碼全部引入，體積太大了，所有就需要做兼容性處理的就做做兼容性處理的就做，使用 core-js。plugins 裏面是一些插件配置，通過 new HtmlWebpackPlugin()，複製裏面的文件，並自動引入打包輸出的所有資源（JS/CSS），設置 mode 模式爲 development 開發模式，代碼如下所示：

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    presets: [
                        [
                            '@babel/preset-env',
                            {
                                useBuiltIns: 'usage',
                                corejs: {
                                    version: 3
                                },
                                targets: {
                                    chrome: '60',
                                    firefox: '60',
                                    ie: '9',
                                    safari: '10',
                                    edge: '17'
                                }
                            }
                        ]
                    ]
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    mode: 'development'
}

在命令行輸入webpack命令，資源就會進行打包，js 的文件也會進行兼容性處理。

三、webpack 進行壓縮 js 和 html

創建空文件夾，通過 npm init 命令初始化 package.json 文件，通過 npm install webpack webpack-cli -g 命令全局下載 webpack 和 webpack-cli，通過 npm install webpack webpack-cli -D 命令本地下載 webpack 和 webpack-cli，通過 npm i html-webpack-plugin 命令下載 html-webpack-plugin。
創建 src 文件夾，在裏面創建 index.js 和 index.html 文件，代碼如下所示：

index.js


const add = (x, y)  => {
  return x + y;
}

console.log(add(2, 5));


const promise = new Promise(resolve => {
  setTimeout(() => {
    console.log('定時器執行完了~');
    resolve();
  }, 1000);
});

console.log(promise);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack</title>
</head>
<body>
    <!-- hello webpack -->
    <h1>hello webpack</h1>
</body>
</html>

壓縮 js，創建 webpack.config.js 文件，通過 require 引入 path 和 html-webpack-plugin 。entry 是入口文件，output 是出口文件，filename 是打包輸出後的文件名，path 是輸出路徑。plugins 裏面是一些插件配置，通過 new HtmlWebpackPlugin()，複製裏面的文件，並自動引入打包輸出的所有資源（JS/CSS），設置 mode 模式爲 production 生產模式，在生產環境下 webpack 會自動壓縮 js 代碼，代碼如下所示：

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    mode: 'production'
}

壓縮 html，創建 webpack.config.js 文件，通過 require 引入 path 和 html-webpack-plugin 。entry 是入口文件，output 是出口文件，filename 是打包輸出後的文件名，path 是輸出路徑。plugins 裏面是一些插件配置，通過 new HtmlWebpackPlugin()，複製裏面的文件，並自動引入打包輸出的所有資源（JS/CSS），進行 minify 配置，通過 collapseWhitespace 移除空格，通過 removeComments 移除註釋。設置 mode 模式爲 production 生產模式，在生產環境下 webpack 會自動壓縮 js 代碼，代碼如下所示：

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            minify: {
                collapseWhitespace: true,
                removeComments: true
            }
        })
    ],
    mode: 'production'
}

在命令行輸入 webpack 命令，資源就會進行打包，同時壓縮 js 和 html 代碼。

webpack 手摸手學習系列之 js 語法檢查、js 兼容性和壓縮 js 以及 html

一、webpack 進行 js 語法檢查 eslint

二、webpack 進行 js 兼容性處理

三、webpack 進行壓縮 js 和 html

《Python進階》學習筆記

Leetcode 3161. 物塊放置查詢

leetcode 60 排列序列

一個docker容器暴露多個端口

微服務實踐之使用 Visual Studio 2022 調試Dapr 應用程序

wpf附加屬性理解 WPF附加屬性

axios 源碼深入分析之源碼實現分析

axios 源碼深入分析之 HTTP 和 json-server

axios 源碼深入分析之 XHR 和 axios 的理解和使用

react 項目中在開發時跨域問題的解決

前端框架面試之 Vue 的使用和 Vue 的原理萬字長文總結

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

webpack 手摸手學習系列之 js 語法檢查、js 兼容性 和 壓縮 js 以及 html

一、webpack 進行 js 語法檢查 eslint

二、webpack 進行 js 兼容性處理

三、webpack 進行壓縮 js 和 html

webpack 手摸手學習系列之 js 語法檢查、js 兼容性和壓縮 js 以及 html