webpack5.第四篇

最新推荐文章于 2024-05-24 09:25:29 发布
最新推荐文章于 2024-05-24 09:25:29 发布
阅读量427 收藏
点赞数
分类专栏： 前端 文章标签： javascript webpack 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48681463/article/details/122214358
版权

webpack5

js兼容性处理eslint

把上一篇的js语法检查工程文件复制一份，并重命名为js兼容性处理。
在这里插入图片描述
当我们js文件使用了ES6以及更高版本的语法时，某些浏览器会不识别其内容，出现运行错误。修改index.js文件内容以es6标准如下

const add = (x, y) => {
  return x + y;
}
console.log(add(2, 5));

修改其中的config.js配置文件，进行兼容性处理。

const { resolve } = require('path');
const HtmlwebpackPlugin = require('html-webpack-plugin');
const eslintwebpackplugin = require('eslint-webpack-plugin')
module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                // js兼容性处理：babel-loader @babel/preset-env
                // 检测js文件
                test: /\.js$/,
                // 排除某些官方文件
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    //预设:指示babel做怎么样的兼容性处理
                    presets: ['@babel/preset-env']
                }
            }
        ]
    },
    plugins: [
        new HtmlwebpackPlugin({
            template: './src/index.html'
        }),

    ],
    mode: 'development'
}

然后终端下载两个包。输入npm i babel-loader @babel/core @babel/preset-env -D,因为该工程是从旧工程复制过来的，所以一些基础的包就不需要重复下载了
在这里插入图片描述
在这里插入图片描述
然后输入npm run dev就可以运行了
在这里插入图片描述
我们看生成的build文件夹下的src下的built.js，发生了变化。
在这里插入图片描述
此时我们再次修改index.js文件内容，增加promise对象。

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);

重新打包后，ie浏览器会报错，说明上述的兼容性处理，只能转换基本的语法，promise则不能。
在这里插入图片描述
下边，在配置文件中升级兼容性处理方法。

const { resolve } = require('path');
const HtmlwebpackPlugin = require('html-webpack-plugin');
const eslintwebpackplugin = require('eslint-webpack-plugin')
module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                // 1.基础js兼容性处理：babel-loader @babel/preset-env
                //问题:只能转换基本语法，如promise不能转换
                //2全部js兼容性处理-- >旧版本是@babel/polyfill，较新的方法是core-js
                /问题:我只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了~
                // 检测js文件
                test: /\.js$/,
                // 排除某些官方文件
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    //预设:指示babel做怎么样的兼容性处理
                    presets: ['@babel/preset-env']
                }
            }
        ]
    },
    plugins: [
        new HtmlwebpackPlugin({
            template: './src/index.html'
        }),

    ],
    mode: 'development'
}

输入npm i @babel/polyfill core-js -D下载所用的包。@babel/polyfill该包的使用方法，是在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);

但是这样做是全局引入，生成的处理后的js包太大了，所以需要按需引入，使用core-js包。修改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);

修改config.js代码

const { resolve } = require('path');
const HtmlwebpackPlugin = require('html-webpack-plugin');
const eslintwebpackplugin = require('eslint-webpack-plugin')
module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                // 1.基础js兼容性处理：babel-loader @babel/preset-env
                //问题:只能转换基本语法，如promise不能转换
                //2全部js兼容性处理-- >旧版本是@babel/polyfill，较新的方法是core-js
                //问题:我只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了~
                //3.需要做兼容性处理的就做：按需加载
                // 检测js文件
                test: /\.js$/,
                // 排除某些官方文件
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    //预设:指示babel做怎么样的兼容性处理
                    presets: [['@babel/preset-env',
                        {
                            //按需加载
                            useBuiltIns: 'usage',
                            // 指定版本
                            corejs: {
                                version: 3
                            },
                            // 指定兼容性做到哪个版本浏览器
                            targets: {
                                chrome: '60',
                                firefox: '60',
                                ie: '9',
                                safari: '10'
                            }
                        }
                    ]],

                }
            }
        ]
    },
    plugins: [
        new HtmlwebpackPlugin({
            template: './src/index.html'
        }),

    ],
    mode: 'development'
}

然后输入npm run dev进行打包。

压缩html和js

复制上一小节工程文件，然后删除build文件夹内容，并重命名，然后修改config.js内代码

const { resolve } = require('path');
const HtmlwebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
    },
    plugins: [
        new HtmlwebpackPlugin({
            template: './src/index.html',
            // 压缩html选项
            minify: {
                // 移除空格
                collapseWhitespace: true,
                // 移除注释
                removeComments: true
            }
        }),

    ],
    //生产环境下会自动压缩js代码
    mode: 'production'
}

终端输入npm run build启动生产环境，生产环境下会自动压缩js代码。压缩html代码只需要配置一些选项。现在查看生成的build文件夹的内容。
在这里插入图片描述
在这里插入图片描述
可以看到都被压缩成了一行。

生产环境配置汇总

新建工程文件，以及webpack.config.js文件。随后在终端中依次输入：

npm init
webpack_production
npm i webpack webpack-cli -D
npm i html-webpack-plugin -D
npm i less-loader css-loader style-loader -D
npm i url-loader file-loader -D
npm i html-loader -D
npm i mini-css-extract-plugin -D
npm i postcss-loader postcss-preset-env -D
npm i css-minimizer-webpack-plugin -D
npm i eslint-webpack-plugin eslint eslint-config-airbnb-base eslint-plugin-import -D
npm i babel-loader @babel/core @babel/preset-env -D

config.js内代码

const { resolve } = require('path');
const minicssextractplugin = require('mini-css-extract-plugin');
// css浏览器兼容性处理，默认是运行在生产环境下，若要运行于开发环境，还需做以下代码
process.env.NODE_ENV = 'development'
const cssminimizerwebpackplugin = require('css-minimizer-webpack-plugin');
const Htmlwebpackplugin = require('html-webpack-plugin');
const Eslintwebpackplugin = require('eslint-webpack-plugin');

module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                // 检测css文件，并打包
                test: /\.css$/,
                use: [
                    minicssextractplugin.loader,
                    'css-loader',
                    {
                        // 对css做兼容性处理
                        // 还需要在package.json中定义browserslist
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: [require('postcss-preset-env')()]
                            }
                        }
                    }
                ]
            },
            {
                // 检测less文件，并打包
                test: /\.less$/,
                // use内代码，是从下往上的顺序执行的
                use: [
                    minicssextractplugin.loader,
                    'css-loader',
                    {
                        // 还需要在package.json中定义browserslist
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: [require('postcss-preset-env')()]
                            }
                        }
                    },
                    'less-loader'
                ]
            },
            // 正常来讲，一个文件只能被一个loader处理，比如一个index.js文件。
            //当一个文件要被多个loader处理，那么一定要指定loader执行的先后顺序
            // {
            //     //在package.json中定义eslintConfig --> airbnb
            //     // js语法检查，webpack4写法
            //     test: /\.js$/,
            //     exclude: /node_modules/,
            //     // 优先执行eslint-loader，对js文件进行处理
            //     enforce: 'pre',
            //     loader: 'eslint-loader',
            //     options: {
            //         // 自动修复语法检查的报错
            //         fix: true
            //     }
            // },
            {
                // js兼容性处理
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    presets: [
                        [
                            '@babel/preset-env', {
                                useBuiltIns: 'usage',
                                corejs:
                                {
                                    version: 3
                                },
                                targets: {
                                    // 浏览器兼容的版本
                                    chrome: '60',
                                    firefox: '50'
                                }
                            }
                        ]
                    ]
                }

            },
            {
                //对图片进行打包处理
                test: /\.(jpg|png|gif)$/,
                loader: 'url-loader',
                options: {
                    limit: 8 * 1024,
                    outputPath: 'imgs',
                    esModule: false
                },
                type: 'javascript/auto'
            },
            {
                // 处理html中的图片文件
                test: /\.html$/,
                loader: 'html-loader',
                options: {
                    esModule: false,
                }

            },
            {
                // 处理其他文件，如字体图标等
                exclude: /\.(js|css|less|html|jpg|png|gif)$/,
                loader: 'file-loader',
                options: {
                    outputPath: 'media',
                    esModule: false,
                },
                type: 'javascript/auto'
            }
        ]
    },
    plugins: [
        new minicssextractplugin({
            // 打包提取成单独文件
            filename: 'css/built.css'
        }),
        new cssminimizerwebpackplugin(
            // 压缩css文件
        ),
        new Htmlwebpackplugin({
            template: './src/index.html',
            // 压缩html
            minify: {
                collapseWhitespace: true,
                removeComments: true
            }
        }),
        new Eslintwebpackplugin({
            // 使用默认配置
            fix: true
        })
    ],
    // 生产环境下，js自动压缩
    mode: 'production'
}

package.json中代码

{
  "name": "webpack_production",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.16.5",
    "@babel/preset-env": "^7.16.5",
    "babel-loader": "^8.2.3",
    "css-loader": "^6.5.1",
    "css-minimizer-webpack-plugin": "^3.3.1",
    "eslint": "^8.5.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-plugin-import": "^2.25.3",
    "eslint-webpack-plugin": "^3.1.1",
    "file-loader": "^6.2.0",
    "html-loader": "^3.0.1",
    "html-webpack-plugin": "^5.5.0",
    "less-loader": "^10.2.0",
    "mini-css-extract-plugin": "^2.4.5",
    "postcss-loader": "^6.2.1",
    "postcss-preset-env": "^7.1.0",
    "style-loader": "^3.3.1",
    "url-loader": "^4.1.1",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1"
  },
  "browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ]
  },
  "eslintConfig": {
    "extends": "airbnb-base"
  }
}

index.html代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
    <!-- 使用下载的图标 -->
    <span class="iconfont icon-lanbaimao"></span>
    <span class="iconfont icon-taozi"></span>

</body>

</html>

index.js代码

import '../css/index.css';
// 引入icon-font样式文件
import '../iconfit/iconfont.css';

function add(x, y) {
  return x + y;
}
console.log(add(2, 5));

随后在终端输入npm run build即可进行打包处理，最后成功打包的工程文件目录如下，build文件夹下为打包后生成的，iconfit文件夹内容为阿里矢量图标库下载图标时，一起下载下来的，image文件夹下内容，为自己找的三个图片。

在这里插入图片描述
进行打包后会出现警告，是因为生产环境下，不建议出现console.log（）代码，而我们的index.js中写了一个该代码。
在这里插入图片描述
运行build文件夹下生成的index.html，效果正常。
在这里插入图片描述

疯子的梦想＠
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【webpack5修行之道】第16篇：性能优化-externals
j178202798的博客
06-18 1902
上一篇： 什么是externals？ externals可以告诉webpack不打包资源，从而减少入口文件的大小，如果不打包某个包，又要用到他，这个时候需要从html的script标签进行引入，一般引入的是包的cdn资源 配置externals的方法有多种： 具体查看webpack官网externals，本文仅对常用的三种方法做描述 方法一： 修改webpack.config.js，配置externals const { CleanWebpackPlugin } = require('clea
webpack配置优化,让你的构建速度飞起
gogo2027的博客
10-03 776
越来越多的项目使用webpack5来构建项目了，今天给大家带来最前沿的webpack5配置，让我们代码在编译/运行时性能更好~提升打包构建速度减少代码体积优化代码运行性能。
webpack5学习进阶：模块、依赖与扩展功能（PostCSS、Web Works、TypeScript）
weixin_43299180的博客
07-26 1186
4、resolver的主体功能就是解析模块，它是基于enhanced-resolve这个包来实现的，所以在webpack中无论使用什么样的模块引用语句，最终都是使用enhanced-resolve这个包的API来实现模块解析的；3、每一个webpack打包都会创建一个compiler对象，它会走完整个生命周期的过程，webpack所有模块的解析都是compiler对象内置模块的解析器（resolvers）去工作的；/’来找到外部的文件；这也操作起来会比较麻烦；............
【构建工具】webpack5 的性能优化和核心流程
秋天，黄叶坠地，凉风有信。
02-22 1338
【构建工具】webpack5 的性能优化和核心流程
Webpack--externals(外部扩展)详解
热门推荐
weixin_39964419的博客
10-14 1万+
externals用法详解
【学习笔记】Webpack5（Ⅱ）
最新发布
Eddie_hyh的博客
05-24 751
Webpack5（Ⅱ）
【学习笔记】Webpack5（Ⅰ）
Eddie_hyh的博客
05-22 1087
Webpack5（Ⅰ）
webpack4.x开发环境配置详解
10-18
首先，安装webpack是配置过程的第一步。在npm或yarn中不指定版本号时，会默认安装最新版本的webpack。在撰写本篇时，4.1.1版本是默认的。由于webpack 4.x相较于之前的版本有很多改变，所以直接参考旧版教程的步骤...
最新大厂前端面试题-面试指南webpack篇.docx
06-06
* webpack-bundle-analyzer：可视化 Webpack 输出文件的体积（业务组件、依赖第三方模块） Loader 和 Plugin 的区别 Loader 和 Plugin 都是 Webpack 中的重要概念，但它们的作用是不同的。Loader 主要用于将非 ...
详解webpack 如何集成第三方js库
01-19
webpack 系列 三：webpack 如何集成第三方js库 webpack 系列 四：webpack 多页面支持 & 公共组件单独打包 webpack 系列 五：webpack Loaders 模块加载器 webpack 系列 六：前端项目模板-webpack+gulp实现自动...
webpack 搭建react环境
01-20
**第四步**是配置Babel。在项目根目录下创建一个`.babelrc`文件，这个文件用来存储Babel的配置。在这个文件中，我们可以指定要使用的Babel预设： ```json { "presets": ["es2015", "react"] } ``` 这样，Babel就...
详解Webpack4多页应用打包方案
11-20
本篇文章将分享一个基于 Webpack 4 的多页应用打包配置实例。 首先，我们来看一下项目的目录结构。源代码位于 `src` 文件夹中，其中 `pages` 文件夹包含了多个子文件夹，每个子文件夹代表一个页面，如 `about`、`...
webpack打包优化之外部扩展(Externals)配置
彭世瑜的博客
08-05 2899
index.html 打开控制台，输入 可以看到是一个函数了webpack.config.js 相当于告诉webpack, 当代码中引入 的时候，使用 替换 更多示例
webpack5 打包工具 详解
共勉
05-29 1405
webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。 在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。 它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。
webpack之深入浅出externals
u010227042的博客
11-18 623
我们通常在做项目时可能会把第三方库打包到bundle中，比如下面这张图 如果不想把第三方库打包到bundle中，这就有了externals。官方的使用externals比较简单，只需三步—— 1.在HTML中引入第三方库的cdn 2.在webpack中配置externals externals: { jquery: "jQuery", } 3.在js中引用 const $ = require("jquery"); $("#content").html("<h1>h
webpack5学习笔记-3 打包优化的操作
weixin_42450128的博客
04-10 2079
一、打包环境区分优化 根据打包环境，写三个webpack配置文件webpack.comm.js，webpack.dev.js，webpcak.prod.js，然后通过webpack-merge包来进行合并 把公共的配置放在common文件，然后把开发环境和生产环境里的放在各自的文件 npm i webpack-merge -D 自己写个用node的path模块处理路径的js，paths.js const path = require('path') const appDir = process.cwd()
webpack打包压缩混淆_webpack实战第三篇（优化webpack）
weixin_39762856的博客
01-01 2008
第一篇的基础部分林海：webpack实战第一篇（基础部分）​zhuanlan.zhihu.com第二篇的搭建react开发环境林海：webpack实战第二篇（搭建react开发环境）​zhuanlan.zhihu.com优化配置对我们来说非常有实际意义，这实际关系到你打包出来文件的大小，打包的速度等。具体优化可以分为以下几点：1.1 优化打包速度构建速度指的是我们每次修改代码后热更新的速度以及发布...
VUE3.0,DAY32，生命周期销毁流程
疯子的梦想@的博客
09-05 6193
VUE3.0,DAY32销毁流程 销毁流程 销毁流程如下所示，就是当vm.$destroy被调用的时候，就启动销毁流程（即页面数据也不更新了，也不用vue管理了等等）。destroy具有销毁的意思。 我们自定义了一个销毁按钮，当点击的时候就启动销毁流程，如下图所示，先点击自加按钮，n的值变为2，然后点击销毁按钮，看到控制台console打印输出，已销毁已启动，然后此时在点击自加按钮，发现页面没反应了。这就是说vm已经被销毁了。然后vm被kill前，其工作成果还保留在了页面上（实现页面的n值为2）。 &lt
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值