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

news2024/11/24 14:12:59

处理 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.coloradmin.cn/o/1852926.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

QtCreator/VS中制作带有界面的动态库

QtCreator/VS中制作带有界面的动态库

1、首先创建动态库项目 class UNTITLED25_EXPORT Untitled25 {public:Untitled25(); };2、直接右键创建同名窗口类进行覆盖 3、引入global头文件并添加到处宏</
阅读更多...
[机器学习算法]支持向量机

[机器学习算法]支持向量机

支持向量机&#xff08;SVM&#xff09;是一种用于分类和回归分析的监督学习模型。SVM通过找到一个超平面来将数据点分开&#xff0c;从而实现分类。 1. 理解基本概念和理论&#xff1a; 超平面&#xff08;Hyperplane&#xff09;&#xff1a;在高维空间中&#xff0c;将数据…
阅读更多...
Git学习2 -- VSCode中的Git

Git学习2 -- VSCode中的Git

看了下&#xff0c;主要的插件有3个。自带的Source Control。第1个是Gitlens&#xff0c;第2个是Git Graph。第三个还有个git history。 首先是Source Control。界面大概是这样的。 还是挺直观的。在第一栏source control&#xff0c;可以进行基本的git操作。主要的git操作都是…
阅读更多...
qt开发-11_Dialog 仿苹果支付界面

qt开发-11_Dialog 仿苹果支付界面

QDialog 是 Qt 框架中用于创建对话框的一个基类。对话框是一种特殊类型的窗口&#xff0c;通常用于短暂的交互和信息交换&#xff0c;如接收用户输入、显示消息、询问用户决定等。QDialog 提供了一种方便的方式来实现这些功能&#xff0c;并能够控制用户与其他窗口的交互性&…
阅读更多...
Android模拟器linux内核的下载，编译，运行，驱动开发测试

Android模拟器linux内核的下载，编译，运行，驱动开发测试

Android模拟器linux内核的下载&#xff0c;编译&#xff0c;运行&#xff0c;内核模块开发 1.下载适合Android模拟器的内核 git clone https://aosp.tuna.tsinghua.edu.cn/android/kernel/goldfish.git git branch -a git checkout android-goldfish-4.14-gchips 新建一个目录…
阅读更多...
喜报！极限科技新获得一项国家发明专利授权：“搜索数据库的正排索引处理方法、装置、介质和设备”

喜报！极限科技新获得一项国家发明专利授权：“搜索数据库的正排索引处理方法、装置、介质和设备”

近日&#xff0c;极限数据&#xff08;北京&#xff09;科技有限公司&#xff08;简称&#xff1a;极限科技&#xff09;新获得一项国家发明专利授权&#xff0c;专利名为 “搜索数据库的正排索引处理方法、装置、介质和设备”&#xff0c;专利号&#xff1a;ZL 2024 1 0479400…
阅读更多...
谈谈跳台阶算法的记忆法和编程理念|青蛙跳台阶|递归|动态规划|算法|程序员面试|Java

谈谈跳台阶算法的记忆法和编程理念|青蛙跳台阶|递归|动态规划|算法|程序员面试|Java

简介 为什么会写这篇文章&#xff1f; 因为鄙人刷过此题多次&#xff0c;每次觉得自己会了&#xff0c;可下次还是不能一下子写出题解&#xff0c;故记录下我是如何记忆此题的&#xff0c;并且探索一些编程理念。 题目 一只青蛙一次可以跳上1级台阶&#xff0c;也可以跳上2级…
阅读更多...
俄语打招呼和问候的12种表达方式，柯桥俄语培训

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

- Как дела ? 近况如何&#xff1f; -Нормально, а ты как? 还行吧&#xff0c;你呢&#xff1f; Vol.2 -Как себя чувствуете? 你感觉如何&#xff1f; -Все замечательно! 一切都非常棒。 Vol.3 -Ка…
阅读更多...
详解 Macvlan 创建不同容器独立跑仿真（持续更新中）

详解 Macvlan 创建不同容器独立跑仿真（持续更新中）

一、概念介绍 1.1 什么是macvlan macvlan是一种网卡虚拟化技术&#xff0c;能够将一张网卡&#xff08;Network Interface Card, NIC&#xff09;虚拟出多张网卡&#xff0c;这意味着每个虚拟网卡都能拥有独立的MAC地址和IP地址&#xff0c;从而在系统层面表现为完全独立的网络…
阅读更多...
颠覆传统编程：用ChatGPT十倍提升生产力

颠覆传统编程：用ChatGPT十倍提升生产力

我们即将见证一个新的时代&#xff01;这是最好的时代&#xff0c;也是最坏的时代&#xff01; 需求背景 背景&#xff1a; 平时会编写博客&#xff0c;并且会把这个博客上传到github上&#xff0c;然后自己买一个域名挂到github上。 我平时编写的博客会有一些图片来辅助说明的…
阅读更多...
拦截器Interceptor

拦截器Interceptor

概念&#xff1a;是一种动态拦截方法调用的机制&#xff0c;类似于过滤器。Spring框架中提供的&#xff0c;用来动态拦截方法的执行。 作用&#xff1a;拦截请求&#xff0c;在指定的方法调用前后&#xff0c;根据业务需要执行预先设定的代码。
阅读更多...
nvdiadocker相关配置S3Gaussian

nvdiadocker相关配置S3Gaussian

https://download.csdn.net/download/sinat_21699465/89458214 dockerfile文件参考&#xff1a; https://download.csdn.net/download/sinat_21699465/89458214 prework&#xff1a; 显卡驱动决定了cuda版本支持的上限。例如nvdia535驱动最高支持cuda12.2所以显卡驱动版本选…
阅读更多...
如何快速绘制logistic回归预测模型的ROC曲线？

如何快速绘制logistic回归预测模型的ROC曲线？

临床预测模型&#xff0c;也是临床统计分析的一个大类&#xff0c;除了前期构建模型&#xff0c;还要对模型的预测能力、区分度、校准度、临床获益等方面展开评价&#xff0c;确保模型是有效的&#xff01; 其中评价模型的好坏主要方面还是要看区分度和校准度&#xff0c;而区分…
阅读更多...
2024全网最全面及最新且最为详细的网络安全技巧四 之 lsql注入以及mysql绕过技巧 (1)———— 作者：LJS

2024全网最全面及最新且最为详细的网络安全技巧四 之 lsql注入以及mysql绕过技巧 (1)———— 作者：LJS

目录 4. SQL注入基础之联合查询 什么是SQL注入漏洞 SQL注入原理 SQL注入带来的危害 注入按照注入技术&#xff08;执行效果&#xff09;分类 简单联合查询注入语句 4.1 [网鼎杯 2018]Comment二次注入 正好总结一下绕过addslashes的方式 4.2 ciscn2019web5CyberPunk 复现平台 解…
阅读更多...
im即时通讯软件系统，私有化部署国产化信创适配安全可控

im即时通讯软件系统，私有化部署国产化信创适配安全可控

私有化部署IM即时通讯软件系统是许多企业为了确保数据安全、控制隐私保护、提升灵活性而考虑的重要选择之一。信创适配安全可控是企业在私有化部署IM即时通讯软件系统时需要关注的关键点。本文将探讨私有化部署IM即时通讯软件系统的意义、信创适配的重要性&#xff0c;以及如何…
阅读更多...
张宇1000题太难？这么刷只要30天就能吃透！

张宇1000题太难？这么刷只要30天就能吃透！

1000题真的难&#xff0c;一刷正确率不高是正常的&#xff01; 我不建议再继续去刷880题&#xff0c;因为继续开始做新题并没有太大的意义&#xff0c;老问题不解决&#xff0c;做新题的效果其实并不好。 如果一刷1000题正确率不高&#xff0c;我们应该反思为什么会这样&…
阅读更多...
Java基础之练习(2)

Java基础之练习(2)

需求: 键盘录入一个字符串,使用程序实现在控制台遍历该字符串 package String;import java.util.Scanner;public class StringDemo5 {public static void main(String[] args) {//录入一个字符串Scanner sc new Scanner(System.in);System.out.println("请输入一个字符串…
阅读更多...
【JAVA】精致的五角星

【JAVA】精致的五角星

输出的这幅图像中&#xff0c;一颗精致的金色五角星跃然于深红色背景之上&#xff0c;绽放出迷人的光彩。 要绘画这颗五角星&#xff0c;首先要了解五角星的构造和角度问题。我们可以分为内五边形&#xff0c;和外五边形。内五边形从他的中心到每个外点&#xff0c;连接起来&am…
阅读更多...
Day28:回溯法 491.递增子序列 46.全排列 47.全排列 II 332.重新安排行程 51. N皇后 37. 解数独

Day28:回溯法 491.递增子序列 46.全排列 47.全排列 II 332.重新安排行程 51. N皇后 37. 解数独

491. 非递减子序列 给你一个整数数组 nums &#xff0c;找出并返回所有该数组中不同的递增子序列&#xff0c;递增子序列中 至少有两个元素 。你可以按 任意顺序 返回答案。 数组中可能含有重复元素&#xff0c;如出现两个整数相等&#xff0c;也可以视作递增序列的一种特殊情…
阅读更多...
设计模式学习之——单例模式

设计模式学习之——单例模式

文章目录 单例模式什么叫做单例模式单例模式的动机 单例模式的引入思考 饿汉式单例和懒汉式单例饿汉式单例懒汉式单例 单例模式总结1&#xff0e;主要优点2&#xff0e;主要缺点3&#xff0e;适用场景 单例模式 什么叫做单例模式 顾名思义&#xff0c;简单来说&#xff0c;单…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023