webpack配置详解一：mode模式

写在前面：该系列文章为本人笔记系列，仅用于学习交流！

一.准备一个基础的demo项目：

1.创建一个空文件夹A，以规范化命名；

2. 进入文件夹A创建一个src文件夹，用于存放源代码

3. 当前A文件根目录下执行 npm init --yes，初始化生成package.json包文件

4. 以jQuery为例，执行 npm install jquery -S，安装jQuery依赖

5. 进入src文件夹创建index.html,并结构化html内容如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><ul><li>这是第1行的数据</li><li>这是第2行的数据</li><li>这是第3行的数据</li><li>这是第4行的数据</li><li>这是第5行的数据</li><li>这是第6行的数据</li><li>这是第7行的数据</li><li>这是第8行的数据</li><li>这是第9行的数据</li><li>这是第10行的数据</li></ul>
</body>
</html>

6. 继续在src文件夹下，创建index.js,实现对<li>标签奇偶展示不同背景色

import $ from 'jquery';$(function(){$('li:even').css('background-color', 'red');$('li:odd').css('background-color', 'green');
})

7. 在index.html中引入index.js（代码片段第八行）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="./index.js"></script>
</head>
<body><ul><li>这是第1行的数据</li><li>这是第2行的数据</li><li>这是第3行的数据</li><li>这是第4行的数据</li><li>这是第5行的数据</li><li>这是第6行的数据</li><li>这是第7行的数据</li><li>这是第8行的数据</li><li>这是第9行的数据</li><li>这是第10行的数据</li></ul>
</body>
</html>

9. 运行html文件，打开控制台发现会发现报错语法错误

二.安装webpack：

1. 继续在根目录下的终端命令窗口下执行命令：

npm install webpack@5.42.1 webpack-cli@4.7.2 -D

说明：-S 代表 --save 生成到dependencies节点下一般存放从开发到上线后都要用到依赖库

-D 代表 --save -dev 生成到 devDependencies节点下通常存放只有开发阶段用到的依赖

2.打开根目录下package.json文件查看，会发现jQuery和webpack生成到不同节点下：

3.项目根目录下创建webpack.config.js文件

// 使用node执行导出wepack配置对象
module.exports = {// mode 指定构建模式 development开发模式 production 生产模式mode: 'development'
}

4. 在package.json文件scripts节点下编写执行脚本，命名可自定义，这里我使用dev，删除原来没用到的test：

5. 在根目录的cmd命令下执行该脚本：npm run dev

6. 此时发现根目录下生成dist文件夹，并且文件夹下生成了一个main.js文件

三、使用webpack

1. index.html文件中由一开始引入index.js不能解析部分代码，现在打包后更改为引入main.js

2. 此时运行html文件，发现js文件生效：

四、变更mode，发现区别：

1. 将 webpack.config.js 中的mode变为生产模式：

2. 再次运行 npm run dev，发现与上次对比：

2.1 main.js由323KiB体积缩小到了88.3KiB，体积压缩了；

2.2 编译由上次的423ms延长到了 3080ms，用时变长了；

2.3 查看main.js变化，发现会进行代码压缩：

之前：

之后：

结论：

开发的时候一定要用development，因为追求的是打包速度，而不是体积；

发布上线的时候一定要用production，因为上线追求的是体积小，而不是打包速度。

webpack配置详解一：mode模式相关推荐

webpack配置详解
1.使用模式: (1).CLI模式:也就是命令行用户界面.例如: webpack example1.1.js bundle1.1.js 如果我们直接执行webpack,不加任何参数(且当前目录不存在配 ...
Docker6种网络配置详解，网络模式应该这么选
文章目录一.Bridge网络模式二.Host网络模式三.Overlay网络模式四.None网络模式五.Macvlan网络模式六.Ipvlan网络模式七.网络模式选择在Docker中,网 ...
webpack 配置详解
最近在学习webpack,边学边练习,下面是对一些应用到的属性.插件记录分享出来,也方便以后查找与复习,过程中碰到了一些坑,在注释中有说明: const path = require('path') ...
webpack手摸手学习系列之配置详解的 entry、output、module、resolve、devServer 和 optimization
一.webpack 配置详解之 entry 创建空文件夹,通过 npm init 命令初始化 package.json 文件,通过 npm install webpack webpack-cli -g ...
java 配置jmstemplate_SpringBoot集成JmsTemplate(队列模式和主题模式)及xml和JavaConfig配置详解...
1.导入jar包: org.springframework.boot spring-boot-starter-activemq org.apache.activemq activemq-pool 2. ...
babel 用法及其 .babelrc 的配置详解，想做前端架构，拒绝一知半解...
Babel 官方介绍:将 ECMAScript 2015 及其版本以后的 javascript 代码转为旧版本浏览器或者是环境中向后兼容版本的 javascript 代码. 简而言之,就是把不兼容的 ...
logback节点配置详解
logback节点配置详解一:根节点 <configuration></configuration> 属性 : debug : 默认为false ,设置为true时,将打印出 ...
转 Log4j.properties配置详解
一.Log4j简介 Log4j有三个主要的组件:Loggers(记录器),Appenders (输出源)和Layouts(布局).这里可简单理解为日志类别,日志要输出的地方和日志以何种形式输出.综合使 ...
Maven settings.xml配置详解
首先:Maven中央仓库的搜索全部公共jar包的地址是,http://search.maven.org/ ===Maven基础-默认中央仓库============================== ...

webpack配置详解一：mode模式

webpack配置详解一：mode模式相关推荐

最新文章

热门文章