webpack的使用

webpack的使用

1.2 静态资源多了带来的问题

• 网页加载速度慢， 因为 我们要发起很多的二次请求
• 要处理错综复杂的依赖关系

 

1.3 如何解决上述问题

• 合并、压缩(gzip)、精灵图、图片的Base64编码
• 可以使用webpack解决各个包之间的复杂依赖关系

 

1.4 什么是webpack

• webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具；
• 借助于webpack这个前端自动化构建工具，可以完美实现资源的合并、打包、压缩、混淆等诸多功能。

 

2. webpack的使用

2.1 webpack的安装

• 全局安装运行npm i webpack -g这样就可以在全局使用webpack的命令了
• 在项目根目录中运行npm i webpack --save-dev安装到项目依赖中

 

备注：在webpack4之后的版本，不光需要安装webpack还需要安装webpack-cli

 

2.2 webpack的使用

2.2.1 案例描述

使用webpack实现列表的隔行换色，通过这个案例学习webpack的基本使用

2.2.2 项目搭建思路

1. 在有了webpack之后，我们项目都是工程化管理，每个项目的结构是很清晰。
2. 对于我们的项目来说会有很多依赖，这个时候我们需要通过npm去管理这些依赖，使用npm init构建项目,使用package.json管理项目。（npm前端的包管理工具）
3. 搭建项目的目录结构

1. src下放我们的源代码
2. src

1. api 放置接口请求的
2. assets 静态文件
3. components 组件
4. layout 界面布局
5. router 路由配置
6. styles 样式
7. utils 工具类
8. views 放界面
9. index.html 根界面
10. main.js 入口文件
11. index.css / index.less / index.sass 全局样式
12. ...

4. 安装jquery插件  npm i jquery

1. npm install

1. -g 全局安装
2. -S 或--save :  把这个依赖保存到package.json的dependence里
3. -D 或 --dev-save : 把这个依赖保存到package.json的devDependence里

5. 不在页面中引入jquery而是在main.js中引用jquery（使用es6高阶语法），这样做可以减少请求次数
6. 编写js脚本
7. 浏览器不认识es6的高级语法，所以使用webpack打包js文件，将这个js文件转化成浏览器可以认识的文件.

1. 安装webpack npm i webpack -D
2. 安装webpack-cli npm i webpack-cli -D
3. 执行打包命令, webpack 【需要打包的文件】 -o 【输出的文件】
4. 因为webpack不是全局安装所以没有办法在命令行中直接执行webpack命令，这里可以借助npm提供的npx命令执行webpack命令 npx webpack 【需要打包的文件】 -o 【输出的文件】

8. 在html中引入打包好的js文件

npx 可以执行项目已经安装的可执行工具

2.2.3 webpack为我们做了什么？

1. 处理了js的依赖关系，对js做了合并。
2. 让浏览器不识别的高级语法，转换成浏览器可以识别的语法。

$(function(){
    $('li:odd').css('background-color','red')
    $('li:even').css('background-color','blue')
})

2.3 webpack的配置文件webpack.config.js

2.3.1 webpack4有默认的配置文件

1. 默认配置的入口文件是src目录。我们在src根目录下添加index.js，就会默认打包这个index.js文件
2. 出口文件在dist目录下生成main.js

2.3.2 自定义配置文件

1. 创建webpack.config.js的文件，放在项目的根目录
2. 配置入口和出口，配置放在module.exports导出的对象里

1. 入口entry，配置这个时候后面写的是路径，这里用到的是node提供的path的api进行路径的拼接  
2. 出口output

1. path
2. filename

 

// webpack的配置文件
const path = require('path');

// 为什么使用path提供的方法拼接路径
// /src/ ,/src , index.js. /index.js
// /src//index.js
// /src/index.js

module.exports = {
    entry: path.join(__dirname, 'src/main.js'),
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
    }
}

 

3. 之后直接运行webpack即可打包

 

在node里__dirname是这个js的当前路径

使用了配置文件之后，我们就不用每次输入入口和出口了，可以简化我们的操作，也能避免不必要的错误

 

执行webpack之后发生了什么：

1. 它会去项目的根目录里找webpack.config.js配置文件，如果没找到会使用默认的配置文件，这个默认的配置文件是在webpack4之后才有的。默认的入口是src/index.js，默认的出口是dist/main.js。
2. 回去找到配置文件配置的入口entry和出口output。
3. 执行webpack的打包命令，将入口文件转化成出口文件。

 

配置多个入口

应用场景：

1. 业务代码和第三方代码分离。
2. 多模块懒加载(单页面应用)

1. 业务场景：在单页面应用中，如果不做懒加载首页加载时，会把所有的js都加载出来，导致首页加载过慢
2. 解决： 加载首页的只加载首页的js，用到哪个模块就加在那个模块的js

 

如何配置：

1. entry之前是单个的地址，只能对应一个文件，entry可以配置成一个对象，对象的key就打包的入口文件起的名字，value是文件对应的地址。
2. output的filename改为[name].js ，这里[name]指向就是配置的key的名字。

 

module.exports = {
    entry: {
        bundle: path.join(__dirname, 'src/main.js'),
        index: path.join(__dirname, 'src/index.js')
    },
    output: {
        path: path.join(__dirname, 'dist'),
        filename: '[name].js'
    }
}

 

 

2.4 使用webpack-dev-server插件启动页面

2.4.1 问题

每次修改之后都要重新打包，之后刷新页面，操作很繁琐，使用webpack-dev-server就可以解决这个问题

2.4.2 如何使用

1. 安装webpack-dev-server依赖 npm i webpack-dev-server -D
2. 运行这个命令启动服务

1. 通过npx运行脚本npx webpack-dev-server
2. 配置package.json脚本

1. 配置之后通过npm run 【配置的名字】就可以启动

 

  "scripts": {
    "dev": "webpack-dev-server",
  },

2.4.3 执行这个webpack-dev-server发生了什么

1. 启动了一个服务，这个服务默认启动在8080端口
2. 执行webpack命令，把输出的内容放在了内存里，我们直接通过localhost:8080/【输出的文件名】就可以访问到这个文件。

1. 为什么要放在内存里：我们文件一保存就会进行打包编译，会频繁涉及到文件的读写，内存的读写效率要比硬盘高很多，所以放在内存里。

3. 我们一修改入口文件，就会执行打包命令，界面就会进行刷新

2.5 实现自动打开浏览器以及热更新

1. 通过命令行指定参数的方式实现 webpack-dev-server --open --port 3000 --contentBase src --hot 注意参数之间都有空格

1. open 打开浏览器
2. port 服务端口号
3. contentBase 默认的界面
4. hot 热部署，每次修改js文件只会打包修改的地方，提高效率,浏览器不刷新修改内容

2. 使用配置文件配置devServer

 

module.exports = {
    ..., // 省略了前面的内容
    devServer: {
        // --open --contentBase src --port 3000 --hot",
        open: true,
        contentBase: 'src',
        port: 3000,
        hot: true
    }
}

 

3. html的使用html-webpack-plugin

(首先确认命令行的路径)

1. 安装html-webpack-plugin  npm i html-webpack-plugin -D
2. 配置html-webpack-plugin

 

// 先引入
const htmlWebpackPlugin = require('html-webpack-plugin');


// webpack.config.js
plugins: [ // 配置插件的节点
    new htmlWebpackPlugin({ // 创建一个 在内存中 生成 HTML  页面的插件
      // 指定 模板页面，将来会根据指定的页面路径，去生成内存中的 页面
      template: path.join(__dirname, './src/index.html'), 
       // 指定生成的页面的名称
      filename: 'index.html'
    })
  ],

3. 生成的文件和之前文件的区别，生成的文件里面会自动引入打包好的js文件。