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 [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，因为上线追求的是体积小，而不是打包速度。

webpack配置详解一：mode模式

猜你喜欢