写在前面:该系列文章为本人笔记系列,仅用于学习交流!
一.准备一个基础的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 [email protected] [email protected] -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,因为上线追求的是体积小,而不是打包速度。