webpack处理js资源10--webpack入门学习

处理 js 资源

有人可能会问，js 资源 Webpack 不能已经处理了吗，为什么我们还要处理呢？

原因是 Webpack 对 js 处理是有限的，只能编译 js 中 ES 模块化语法，不能编译其他语法，导致 js 不能在 IE 等浏览器运行，所以我们希望做一些兼容性处理。

其次开发中，团队对代码格式是有严格要求的，我们不能由肉眼去检测代码格式，需要使用专业的工具来检测。

  • 针对 js 兼容性处理，我们使用 Babel 来完成
  • 针对代码格式，我们使用 Eslint 来完成

我们先完成 Eslint，检测代码格式无误后，在由 Babel 做代码兼容性处理

Eslint

可组装的 JavaScript 和 JSX 检查工具。

这句话意思就是：它是用来检测 js 和 jsx 语法的工具，可以配置各项功能

我们使用 Eslint，关键是写 Eslint 配置文件，里面写上各种 rules 规则，将来运行 Eslint 时就会以写的规则对代码进行检查

1. 配置文件


配置文件由很多种写法：

  • .eslintrc.*：新建文件，位于项目根目录
  1. .eslintrc
  2. .eslintrc.js
  3. .eslintrc.json
  4. 区别在于配置格式不一样
  • package.json 中 eslintConfig：不需要创建文件，在原有文件基础上写

ESLint 会查找和自动读取它们，所以以上配置文件只需要存在一个即可

2. 具体配置


我们以 .eslintrc.js 配置文件为例：

module.exports = {
  // 解析选项
  parserOptions: {},
  // 具体检查规则
  rules: {},
  // 继承其他规则
  extends: [],
  // ...
  // 其他规则详见：https://eslint.bootcss.com/docs/user-guide/configuring
};

1.parserOptions 解析选项

parserOptions: {
  ecmaVersion: 6, // ES 语法版本
  sourceType: "module", // ES 模块化
  ecmaFeatures: { // ES 其他特性
    jsx: true // 如果是 React 项目，就需要开启 jsx 语法
  }
}

2.rules 具体规则

  • "off" 或 0 - 关闭规则
  • "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
  • "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出) 
    rules: {
  semi: "error", // 禁止使用分号
  'array-callback-return': 'warn', // 强制数组方法的回调函数中有 return 语句，否则警告
  'default-case': [
    'warn', // 要求 switch 语句中有 default 分支，否则警告
    { commentPattern: '^no default$' } // 允许在最后注释 no default, 就不会有警告了
  ],
  eqeqeq: [
    'warn', // 强制使用 === 和 !==，否则警告
    'smart' // https://eslint.bootcss.com/docs/rules/eqeqeq#smart 除了少数情况下不会有警告
  ],
}

更多规则详见：规则文档

3.extends 继承
开发中一点点写 rules 规则太费劲了，所以有更好的办法，继承现有的规则。

现有以下较为有名的规则：

  • Eslint 官方的规则open in new window：eslint:recommended
  • Vue Cli 官方的规则open in new window：plugin:vue/essential
  • React Cli 官方的规则open in new window：react-app 
    // 例如在React项目中，我们可以这样写配置
module.exports = {
  extends: ["react-app"],
  rules: {
    // 我们的规则会覆盖掉react-app的规则
    // 所以想要修改规则直接改就是了
    eqeqeq: ["warn", "smart"],
  },
};

3. 在 Webpack 中使用

1.下载包

npm i eslint-webpack-plugin eslint -D

2.定义 Eslint 配置文件

  • .eslintrc.js 
    module.exports = {
  // 继承 Eslint 规则
  extends: ["eslint:recommended"],
  env: {
    node: true, // 启用node中全局变量
    browser: true, // 启用浏览器中全局变量
  },
  parserOptions: {
    ecmaVersion: 6,
    sourceType: "module",
  },
  rules: {
    "no-var": 2, // 不能使用 var 定义变量
  },
};

2.修改 js 文件代码

  • main.js
import count from "./js/count";
import sum from './js/sum'
import "./css/iconfont.css"
import "./css/index.css"
import "./less/index.less"
import "./sass/index.scss"
import "./styl/index.styl"
import "./video/oceans.mp4"
var a = 666
console.log(a);
console.log(count(2, 3));
console.log(sum(1, 2, 3, 4));

1.配置

  • webpack.config.js 
    const path = require('path')
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
module.exports = {
    // 入口
    entry: './src/main.js',
    // 出口
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'static/js/main.js',// 指定文件名
        clean: true,// 打包前清除目录
    },
    // 加载器
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.less$/i,
                use: [
                    // compiles Less to CSS
                    'style-loader',
                    'css-loader',
                    'less-loader',
                ],
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    // 将 JS 字符串生成为 style 节点
                    'style-loader',
                    // 将 CSS 转化成 CommonJS 模块
                    'css-loader',
                    // 将 Sass 编译成 CSS
                    'sass-loader',
                ],
            },
            {
                test: /\.styl$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "stylus-loader"
                ],// 将 Stylus 文件编译为 CSS
            },
            {
                test: /\.(png|jpe?g|gif|webp)$/,
                type: "asset",
                parser: {
                    dataUrlCondition: {
                        maxSize: 150 * 1024 // 小于15kb的图片会被base64处理
                    }
                },
                generator: {
                    // 将图片文件输出到 static/imgs 目录中
                    // 将图片文件命名 [hash:8][ext][query]
                    // [hash:8]: hash值取8位
                    // [ext]: 使用之前的文件扩展名
                    // [query]: 添加之前的query参数
                    filename: "static/imgs/[hash:16][ext][query]",
                },
            },
            {
                test: /\.(ttf|woff2?|mp4|mp3|avi)$/,
                type: "asset/resource",
                generator: {
                    filename: "static/media/[hash:8][ext][query]",
                },
            },

        ],
    },
    // 插件
    plugins: [
        new ESLintWebpackPlugin({
            // 指定检查文件的根目录
            context: path.resolve(__dirname, "src"),
        }),
    ],
    // 模式
    mode: "development"
}

5.运行指令

npx webpack

在控制台查看 Eslint 检查效果

4. VSCode Eslint 插件

打开 VSCode，下载 Eslint 插件，即可不用编译就能看到错误，可以提前解决

但是此时就会对项目所有文件默认进行 Eslint 检查了，我们 dist 目录下的打包后文件就会报错。但是我们只需要检查 src 下面的文件，不需要检查 dist 下面的文件。

所以可以使用 Eslint 忽略文件解决。在项目根目录新建下面文件:

  • .eslintignore 
    # 忽略dist目录下所有文件
dist

Babel

JavaScript 编译器。

主要用于将 ES6 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中

1. 配置文件

配置文件由很多种写法：

  • babel.config.*：新建文件，位于项目根目录
  1. babel.config.js
  2. babel.config.json
  • .babelrc.*：新建文件，位于项目根目录
  1. .babelrc
  2. .babelrc.js
  3. .babelrc.json
  • package.json 中 babel：不需要创建文件，在原有文件基础上写

Babel 会查找和自动读取它们，所以以上配置文件只需要存在一个即可

2. 具体配置


我们以 babel.config.js 配置文件为例：

module.exports = {
  // 预设
  presets: [],
};

1.presets 预设
简单理解：就是一组 Babel 插件, 扩展 Babel 功能

  • @babel/preset-env: 一个智能预设，允许您使用最新的 JavaScript。
  • @babel/preset-react：一个用来编译 React jsx 语法的预设
  • @babel/preset-typescript：一个用来编译 TypeScript 语法的预设

3. 在 Webpack 中使用

1.下载包

npm i babel-loader @babel/core @babel/preset-env -D

2.定义 Babel 配置文件

  • babel.config.js 
    module.exports = {
  presets: ["@babel/preset-env"],
};

3.修改 js 文件代码

  • main.js 
    import count from "./js/count";
import sum from './js/sum'
import "./css/iconfont.css"
import "./css/index.css"
import "./less/index.less"
import "./sass/index.scss"
import "./styl/index.styl"
import "./video/oceans.mp4"
let a = 666
console.log(a);
const jiantou = ()=>{
    console.log('箭头函数');
}
jiantou()
console.log(count(2, 3));
console.log(sum(1, 2, 3, 4));

4.配置

  • webpack.config.js 
    const path = require('path')
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
module.exports = {
    // 入口
    entry: './src/main.js',
    // 出口
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'static/js/main.js',// 指定文件名
        clean: true,// 打包前清除目录
    },
    // 加载器
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.less$/i,
                use: [
                    // compiles Less to CSS
                    'style-loader',
                    'css-loader',
                    'less-loader',
                ],
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    // 将 JS 字符串生成为 style 节点
                    'style-loader',
                    // 将 CSS 转化成 CommonJS 模块
                    'css-loader',
                    // 将 Sass 编译成 CSS
                    'sass-loader',
                ],
            },
            {
                test: /\.styl$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "stylus-loader"
                ],// 将 Stylus 文件编译为 CSS
            },
            {
                test: /\.(png|jpe?g|gif|webp)$/,
                type: "asset",
                parser: {
                    dataUrlCondition: {
                        maxSize: 150 * 1024 // 小于15kb的图片会被base64处理
                    }
                },
                generator: {
                    // 将图片文件输出到 static/imgs 目录中
                    // 将图片文件命名 [hash:8][ext][query]
                    // [hash:8]: hash值取8位
                    // [ext]: 使用之前的文件扩展名
                    // [query]: 添加之前的query参数
                    filename: "static/imgs/[hash:16][ext][query]",
                },
            },
            {
                test: /\.(ttf|woff2?|mp4|mp3|avi)$/,
                type: "asset/resource",
                generator: {
                    filename: "static/media/[hash:8][ext][query]",
                },
            },
            {
                test: /\.js$/,
                exclude: /node_modules/, // 排除node_modules代码不编译
                loader: "babel-loader",
            },

        ],
    },
    // 插件
    plugins: [
        new ESLintWebpackPlugin({
            // 指定检查文件的根目录
            context: path.resolve(__dirname, "src"),
        }),
    ],
    // 模式
    mode: "development"
}

5.运行指令

npx webpack


打开打包后的 dist/static/js/main.js 文件查看，会发现箭头函数等 ES6 语法已经转换了

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/735620.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Zabbix+Garafana监控部署

Zabbix+Garafana监控部署

ZabbixGarafana监控部署 一、IP规划 服务器IP备注zabbix-server192.168.100.128zabbix服务端zabbix-mysql192.168.100.130数据库zabbix-client192.168.100.132zabbix客户端garafana-server192.168.100.134Garafana 二、zabbix-server安装zabbix ​ 配置IP地址为&#xff1a…
阅读更多...
俄语打招呼和问候的12种表达方式，柯桥俄语培训

俄语打招呼和问候的12种表达方式，柯桥俄语培训

- Как дела ? 近况如何？ -Нормально, а ты как? 还行吧，你呢？ Vol.2 -Как себя чувствуете? 你感觉如何？ -Все замечательно! 一切都非常棒。 Vol.3 -Ка…
阅读更多...
基于matlab的图像灰度化与图像反白

基于matlab的图像灰度化与图像反白

1原理 2.1 图像灰度化原理 图像灰度化是将彩色图像转换为灰度图像的过程，使得每个像素点仅包含一个灰度值，从而简化了图像的复杂度。灰度化原理主要可以分为以下几种方法： 亮度平均法 原理：将图像中每个像素的RGB值的平均值作为…
阅读更多...
Vue40 修改默认配置

Vue40 修改默认配置

修改默认配置 在官网查看各个属性的作用 ### 在vue.config.js文件中，修改属性的值
阅读更多...
计算机网络 静态路由及动态路由RIP

计算机网络 静态路由及动态路由RIP

一、理论知识 1.静态路由 静态路由是由网络管理员手动配置在路由器上的固定路由路径。其优点是简单和对网络拓扑变化不敏感，缺点是维护复杂、易出错，且无法自动适应网络变化。 2.动态路由协议RIP RIP是一种基于距离向量的动态路由协议。它使用跳数作…
阅读更多...
接口自动化拓展：Flask框架安装、介绍及工作中的应用！

接口自动化拓展：Flask框架安装、介绍及工作中的应用！

Flask是一个轻量级的Python Web框架，用于构建Web应用程序和API。它简洁而灵活，容易上手，并且非常适合用于开发小型到中型规模的应用程序。在接口自动化测试中，Flask可以作为服务器框架，用于搭建测试接口。 本文将从零…
阅读更多...
使用USI作为主SPI接口

使用USI作为主SPI接口

代码; lcd_drive.c //***************************************************************************** // // File........: LCD_driver.c // // Author(s)...: ATMEL Norway // // Target(s)...: ATmega169 // // Compiler....: AVR-GCC 3.3.1; avr-libc 1.0 // // D…
阅读更多...
UltraEditUEStudio软件安装包下载及安装教程

UltraEditUEStudio软件安装包下载及安装教程

​根据软件大数据显示提供预定义的或使用者创建的编辑“环境”，能记住 UltraEdit 的所有可停靠窗口、工具栏等的状态。实际上我们可以这样讲HTML 工具栏，对常用的 HTML 功能作了预配置;文件加密/解密;多字节和集成的 IME。根据使用者情况表明Git Editor&…
阅读更多...
day41--Redis（三）高级篇之最佳实践

day41--Redis（三）高级篇之最佳实践

Redis高级篇之最佳实践 今日内容 Redis键值设计批处理优化服务端优化集群最佳实践 1、Redis键值设计 1.1、优雅的key结构 Redis的Key虽然可以自定义，但最好遵循下面的几个最佳实践约定： 遵循基本格式：[业务名称]:[数据名]:[id]长度不超过…
阅读更多...
【Linux系列】find命令使用与用法详解

【Linux系列】find命令使用与用法详解

💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…
阅读更多...
动手学深度学习（Pytorch版）代码实践 -卷积神经网络-26网络中的网络NiN

动手学深度学习（Pytorch版）代码实践 -卷积神经网络-26网络中的网络NiN

26网络中的网络NiN import torch from torch import nn import liliPytorch as lp import matplotlib.pyplot as plt# 定义一个NiN块 def nin_block(in_channels, out_channels, kernel_size, strides, padding):return nn.Sequential(# 传统的卷积层nn.Conv2d(in_channels, ou…
阅读更多...
兰州理工大学24计算机考研情况，好多专业都接受调剂，只有计算机专硕不接收调剂，复试线为283分！

兰州理工大学24计算机考研情况，好多专业都接受调剂，只有计算机专硕不接收调剂，复试线为283分！

兰州理工大学（Lanzhou University of Technology），位于甘肃省兰州市，是甘肃省人民政府、教育部、国家国防科技工业局共建高校，甘肃省高水平大学和“一流学科”建设高校；入选国家“中西部高校基础能力建设工…
阅读更多...
年薪50w+的项目经理，手把手教你如何复盘

年薪50w+的项目经理，手把手教你如何复盘

复盘是一种重要的学习和改进工具，对于项目经理来说，能帮助识别项目中的成功与失败，为未来的项目管理提供宝贵经验。 理论部分 定义目标。在开始复盘之前，明确复盘的目标是什么。是为了找出项目中的问题并提出解决方案&#xff0c…
阅读更多...
Open MMLab 之 MMDetection3D框架

Open MMLab 之 MMDetection3D框架

MMDetection框架入门教程（完全版）-CSDN博客 OpenMMLab MMDetection是商汤和港中文大学针对目标检测任务推出的一个开源项目，它基于Pytorch实现了大量的目标检测算法，把数据集构建、模型搭建、训练策略等过程都封装成了一个个模块…
阅读更多...
Chromium 调试指南2024 Mac篇 - 准备工作 (一)

Chromium 调试指南2024 Mac篇 - 准备工作 (一)

1.引言 Chromium是一个由Google主导开发的开源浏览器项目，它为Google Chrome浏览器提供了基础框架。Chromium不仅是研究和开发现代浏览器技术的重要平台，还为众多其他基于Chromium的浏览器（如Microsoft Edge、Brave等）提供了基础…
阅读更多...
基于Openmv的色块识别代码及注意事项

基于Openmv的色块识别代码及注意事项

在给出代码之前我先说注意事项以及需要用到的函数 1、白平衡和自动增益的关闭 打开白平衡和自动增益会影响颜色识别的效果，具体影响体现在可能使你颜色阈值发生改变 关闭代码如下 sensor.set_auto_gain(False) #关闭自动增益 sensor.set_whitebal(False) …
阅读更多...
【笔记】HashMap的头插死循环问题

【笔记】HashMap的头插死循环问题

HashMap头插死循环是指在JDK1.7中，多线程环境下，HashMap进行扩容时由于多个线程一起执行扩容，可能会导致某一结点被错误插入头部并形成一个循环链表。 发生死循环的源码如下： // hashmap由数组链表构成 void transfer(Entry[] ne…
阅读更多...
MySQL进阶——触发器

MySQL进阶——触发器

目录 1介绍 2语法 3案例 3.1 insert插入数据类型 3.2 update修改数据类型 3.3 delete删除数据类型 4视图/存储过程/触发器—小结 1介绍 触发器是与表有关的数据库对象，指在insert/update/delete之前(BEFORE)或之后(AFTER)，触发并执行触发器中定义…
阅读更多...
mysql启动时遇到:本地计算机上的MySQL服务启动后停止

mysql启动时遇到:本地计算机上的MySQL服务启动后停止

1.问题重述： 今早启动数据库时发现无法启动，报错：本地计算机 上的 MySQL服务启动后停止。某些服务在未由其他服务或程序使用时将自动停止。 2.解决方案： 1.数据备份： 2.在bin目录下，命令行中输入 mysqld …
阅读更多...
认识微服务

认识微服务

单体架构 单体架构：将业务的所有功能集中在一个项目中开发，打成一个包部署。 优点： 架构简单部署成本低缺点： 团队协作成本高系统发布效率低系统可用性差 总结： 单体架构适合开发功能相对简单，规模较小…
阅读更多...
最新文章

Copyright @ 2022~2023