webpack 手摸手学习系列之 js 语法检查、js 兼容性和压缩 js 以及 html-CSDN博客

本文链接：https://blog.csdn.net/weixin_42614080/article/details/106392643

一、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'
}