webpack的使用

webpack的使用

界面中的静态资源

静态资源多了带来的一些问题，例如网页加载速度慢， 因为我们要发起很多的二次请求，还有要处理错综复杂的依赖关系，所以可以使用webpack解决各个包之间的复杂依赖关系。

什么是webpack

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

webpack的安装

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

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

webpack的使用

项目搭建

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 全局样式

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

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

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

webpack为我们做了什么？

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

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

webpack的配置文件webpack.config.js

webpack4有默认的配置文件

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

2.出口文件在dist目录下生成main.js

自定义配置文件

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的打包命令，将入口文件转化成出口文件。

4.配置多个入口

应用场景：
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'
    }
}