webpack学前必备

webpack中文网

webpack官网

1. Webpack 介绍

Webpack 是什么?? (面试)

前端模块化打包工具
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块、其它的一些浏览器不能直接运行的拓展语言（Scss，less等）以及新语法，并将其转换和打包为合适的格式供浏览器使用。

为什要使用WebPack?? (面试)

浏览器不识别 SASS、Less ==> 需要对Less/SASS 进行预编译转为CSS , 供浏览器使用
项目中的模块化以及互相之间引用依赖包造成文件分散 ==> 需要把各个分散的模块集中打包成大文件，减少HTTP的链接的请求次数
打包成了大文件,体积就变大了 ==> 代码压缩
部分ES6语法有兼容问题 => ES5/ES3 => 浏览器使用
…
以上这些操作以前都是需要我们手动处理,这是非常繁琐的, 这个时候webpack就可以上场了,以上的这些操作,
在webpack里,只要配置好,一下就可以都搞定了

webpack模块化说明

1. webpack是一个模块化打包器。2. webpack中的模块：以前，我们说一个js文件就是一个模块webpack中一切的资源都可以称之为模块。webpack基于node,  html/css/js/图片/资源都可以是模块3. webpack内部提供了一种通用的模块机制。支持市面上所有的模块化语法，，，，，最终webpack内部打包的时候，都会变成通用的模块化语法。4. 目前有哪些模块化规范
nodejs中 ：   Commonjs规范     require()  module.exports ={}
浏览器中：    AMD规范   CMD规范  requirejs seajs
ES6中还提供了一种通用的模块化规范  import export （nodejs  浏览器）webpack支持所有的规范。

使用说明

一般来说，以后开发都是在webpack的环境下进行开发（node环境）

并且我们写完的项目并不会直接上线。而是会经过webpack进行打包。最终把打包过的文件进行上线。

2. Webpack 四个核心概念 (学前了解)：

入口(entry)、出口(output)、加载器(loader)、插件(plugins)

入口 : 要打包哪个文件
出口 : 要打包到哪里
加载器 : 加载除了js文件其他文件的功能 (css less png)
插件 : 处理加载器完成不了的功能, 使用插件

3. npm 使用回顾

3.1 全局安装

格式 : npm i xxx -g
作用 : 全局安装的包, 是当成一个工具来使用的
比如 :npm i http-server -g, npm i live-server -g , npm i json-server -g 等等

3.2 本地安装1

格式 : npm i xxx
其他版本 :npm i xx --save 和 npm i xx -S
作用 : 本地安装的包, 发布上线阶段 要用到的库
依赖位置 : 把包的依赖添加到 dependencies中
比如 : npm i axios

3.3 本地安装2 (配置webpack用的最多)

格式 : npm i xxx -D
其他版本 : npm i xxx --save dev
作用 : 本地安装的包, 只在开发阶段都要用到的库
依赖位置 : 把包的依赖添加到 devdependencies中
比如 : npm i webpack -D

4. 淘宝镜像

方式1 : 直接命令

2.1.1. 命令 
npm config set registry https://registry.npm.taobao.org2.1.2. 验证命令
npm config get registry
如果返回https://registry.npm.taobao.org，说明镜像配置成功。

方式2 : nrm

- 全局安装 nrm   :  npm i nrm -g 
- 查看有哪些镜像源  : nrm ls
- 切换镜像源       : nrm use taobao- 如果确定安装过 nrm 但是报错不能使用  =>  可能是 nrm 没有配置过环境变量  
- cmd => where nrm   => C:\Users\ma250\AppData\Roaming\npm\nrm
=>拿到 C:\Users\ma250\AppData\Roaming\npm => 添加到环境变量里面去 => 再把终端都关闭

5. package.json 的介绍

npm init -y

{// 包名/项目名  要求:小写字母, 不能是大写或者叫webpack"name": "webpack-demo",// 版本号  "version": "1.0.0",// 介绍"description": "",// 默认入口文件index.js  可以自己指定  "main": "index.js",// 脚本 (★★★)  "scripts": {"test": "echo \"Error: no test specified\" && exit 1"},// 关键字  "keywords": [],// 作者"author": "",// 许可证   "license": "ISC"
}

配置自定义脚本
- 创建一个 index.js =>console.log('测试启动脚本')
- 执行 : node index.js
- 也可以通过运行脚本来执行命令 (优势如果配置太多手动就不好处理了)
常见脚本

"scripts": {"build": "node index.js","dev": "node index.js","serve": "node index.js",
}
// 像以上这几种运行脚本 :  npm run build/dev/serve"scripts": {"start": "node index.js","stop": "node index.js","restart": "node index.js"
},  
// 像  start、stop、restart test这几种  我们可以省略 run
// 直 npm run start 或者  npm start 都可以

webpack配置

1. webpack打包的基本使用

本地安装

创建项目名称 webacpk-demo : 不能是大写不能是webpack
使用npm init -y生成package.json :
创建两个文件夹 src/(源代码文件夹) 和 dist/(最终打包输出的文件夹)
在 src 里面创建一个 index.js 文件 (准备要被打包的入口文件)

console.log('我就要被打包了,哦也');

安装依赖包 :npm i webpack webpack-cli -D

webpack  - 核心包
webpack-cli - 使用 webpack 4+版本需要安装

添加脚本 : build

"scripts": {// "build" : "webpack 入口文件 --output 出口文件""build" : "webpack ./src/index.js --output dist/bundle.js"},

打包运行命令 :npm run build

画图

2. mode 配置

WARNING in configuration
The 'mode' option has not been set, webpack will fallback(备用) to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.

mode配置项
- development : 开发阶段 (不压缩)
- production : 发布阶段 (压缩)
配置

"scripts": {"build": "webpack ./src/index.js --output dist/bundle.js --mode development""build": "webpack ./src/index.js --output dist/bundle.js --mode production"},

3. 指定配置文件 (★★★)

使用一个配置文件

随着配置越来越多,在脚本里配置就显得麻烦了所以我们一般常用配置文件

根目录创建一个配置文件 : webpack.config.js

你也可以创建 webpack.config.dev.js(开发阶段用的)  webpack.config.prod.js(发布阶段用的)

添加配置

// 因为 webpack 是基于 node
// 所以在配置文件里面 我们可以直接使用 node 的语法
const path = require('path')module.exports = {// 入口entry: path(__dirname, './src/index.js'),// 出口output: {// 目录path: path.join(__dirname, './dist'),filename: 'bundle.js',},// modemode: 'development',
}

修改脚本

"build" : "webpack --config webpack.config.js"

4. 隔行变色案例

创建 : src/index.html
隔行案例结构 => ul>li{我是li $}* 10
安装 jquery : npm i jquery
引入 jquery 和设置样式 (ok)

// 引入
<script src="../node_modules/jquery/dist/jquery.js"></script>// 设置样式
$('li:odd').css('background', 'red')
$('li:even').css('background', 'blue')

使用 es6 的模块化语法 import

// 使用ES6的模块化语法
import $ from 'jquery'      # 优点: 不用沿着路径去找      # 浏览器不支持import语法 报错
....
// 语法报错

打包 : npm run build
引入 打包后的文件

<script src='../dist/bundle.js'></script>

code记得保存一份

5. 插件: html-webpack-plugin

html-webpack-plugin

作用 :

能够根据指定的模板文件 (index.html),自动生成一个新的 index.html,并且注入到dist文件夹下
能够自动引入js文件

安装 :

npm i html-webpack-plugin -D

配置 :

第一步: 引入模块
const htmlWebpackPlugin = require('html-webpack-plugin')
第二步: 配置
// 插件
plugins: [// 使用插件 指定模板new htmlWebpackPlugin({template: path.join(__dirname, './src/index.html')})
]

webpack 处理非 js 文件

webpack 只能处理 js 文件,非 js (css.less.图片.字体等) 处理不了, 借助 loader 加载器

1. 处理 css文件

创建一个css文件 : src/css/index.css

li {line-height: 40px;height: 40px;
}

index.js 中引入

import './css/index.css'

安装 : npm i style-loader css-loader -D
配置

// loader
module: {rules: [//1.处理 css// 注意点 use执行loader 顺序 从右往左// css-loader  :  读取css文件内容,将其转化为一个模块// style-loader : 拿到模块, 创建一个style标签,插入页面中{ test: /\.css$/, use: ['style-loader', 'css-loader'] }]
}

重启 npm run dev

2. 处理 less 文件

创建一个 less 文件 : src/css/index.less

ul {list-style: none;li {&:hover {color: yellow;}}
}

index.js 中引入

import './css/index.less'

安装 : npm i less-loader less style-loader css-loader -D
配置

// loader
module: {rules: [//2.处理 less{ test: /\.less$/, use: ['style-loader', 'css-loader','less-loader'] }]
}

重启 npm run dev

3. 处理图片

创建src/images/, 引入两种图片 01.png 和 1.gif
在index.css中设置背景图片

body {padding-top: 200px;background: url(../images/01.png) no-repeat;
}

安装 : npm i -D url-loader file-loader

url-loader (推荐) 和 file-loader 二选一即可

配置 :

// 处理图片{ test : /\.(jpg|png|gif)$/, use : ['url-loader'] },

4. url-loader 和 file-loader

4.1通过 npm run build 打实体闭演示区别

url-loader 会把图片编译成 base64 格式,打包到 bundle.js 中

- base64 : 是一种编码格式,能够将图片、文字等常见的文件,转化为 base64 格式,这种字符串格式, 浏览器能够识别并且读取显示到页面中, 也可以直接被内嵌到页面中, 或者 css 中
- 一旦打包成base64格式之后, 会以字符串的形式存在 bundle.js 中, 好处是能够减少一个图片的 HTTP 请求
- index.html   =====>  bundle.js( base64图片格式 )

注意 : Base64 的好处是能够减少一个图片的 HTTP 请求，然而，与之同时付出的代价则是 CSS 文件体积的增大。

CSS 文件体积的增大意味着什么呢？意味着 CRP 的阻塞。 CRP（Critical Rendering Path，关键渲染路径）

CSS 文件的体积直接影响渲染，导致用户会长时间注视空白屏幕

file-loader 不会把图片打包到 bundle.js中，而是单独的生成了一个张图片

劣势 : 单独生成一个图片, 就要多发送一个图片的 http请求

4.2 最终方案

方案 :

如果图片小的话, 就使用url-loader 编译成base64 格式,

如果图片大的话就使用file-loader单独生成一个图片文件

配置

// 使用 url-laoder , 因为url-loader 依赖 file-loader
{ test : /\.(jpg|png|gif)$/, use : ['url-loader'] },

添加limit配置

方式1(旧) :{ test : /\.(jpg|png)$/, use : ['url-loader?limit=10000'] },   // use 后 多个为数组, 少为对象 都可以
方式2(新) : 
{test: /\.(jpg|png)$/, use: {loader: 'url-loader',options: {//  < 21k   => 通过url-loader => 转化为base64//  >= 21kb => 通过file-loader=>  不会转base64 单独生成一个图片文件limit: 21 * 1024}}
},

可以 build演示

5. 处理字体文件

准备字体图标: 字体图标文件 iconfont 或者从阿里矢量图标里下载
在 index.js 中引入 css 文件
```
import '../css/iconfont/iconfont.css'
```
使用 :
在 webpack.config.js 中配置

 // 4. 处理字体图标{ test:/\.(svg|woff|woff2|ttf|eot)$/,use:'url-loader'}

提取文件

1. 提取css到`css`文件夹

提取css文件

安装 : npm i mini-css-extract-plugin -D
配置

//2.1 引入 模块
const MiniCssExtractPlugin = require('mini-css-extract-plugin');module.exports = {//2.2 实例插件plugins: [new MiniCssExtractPlugin()],//2.3 配置module: {rules: [{test: /\.css$/,use: ['style-loader', MiniCssExtractPlugin.loader, 'css-loader'],},],},
};/// =======> 生成一个 main.css 文件

自定义css文件名

//2.2 实例插件
new MiniCssExtractPlugin({filename: 'css/index.css',
}),// ===> 图片引入失败 , 层级不对

添加公共路径

 {test: /\.css$/,use: [{loader: MiniCssExtractPlugin.loader,options: {// index.css 里面的引入路径都加个 ../publicPath: '../',},},'css-loader',],},

现在的css文件

body {padding-top: 200px;background: url(../3309d79967e334a7c78cf8130266c390.gif) no-repeat;
}

2. 提取字体到 `fonts`文件夹里

{test: /\.(eot|woff|svg|ttf)$/,use: {loader: 'url-loader',// loader的参数配置options: {// 范围  30k   1kb = 2014字节limit: 2 * 1024,name: '[name].[ext]',outputPath: 'fonts'}}
},

3. 提取图片到 `images`文件夹里

// 处理图片
{test: /\.(png|jpg|gif)$/,use: [{loader: 'url-loader',options: {limit: 1000,name: '[name].[ext]',outputPath: 'images',},},],
},

开发阶段

1. webpack-dev-server

作用 : 为使用 webpack 打包提供一个服务器环境

1 自动为我们的项目创建一个服务器

2 自动打开浏览器

3 自动监视文件变化,自动刷新浏览器…

安装 :npm i webpack-dev-server -D
添加一个脚本 dev

"scripts": {"serve" : "webpack-dev-server --config webpack.config.js"
},

运行脚本 :

运行 :npm run serve结果 : i ｢wdm｣: Compiled successfully.查看 : Project is running at http://localhost:8080/

作用演示 :

# 自动打开浏览器devServer: {open: true
}
# 自动监视文件变化 + 自动刷新
$('li:even').css('background', 'blue')  ==> 'yellow' # 配置端口devServer: {open: true,port :3001
}

2. hot 热更新 (待定)

"dev": "webpack-dev-server --config webpack.config.js --hot"

##3. serve 和 build的使用区别

"scripts": {"build": "webpack --config webpack.config.js","serve": "webpack-dev-server --config webpack.config.js"
},

npm run serve

开发模式 :  => 开发项目中使用 , 不会打包出实体文件, 打包到内存中, 这样能够及时监视更新

npm run build

发布上线使用
1 执行 : `npm run build` 对项目进行打包,生成dist文件
2 模拟本地服务器 : 安装 : `npm i -g live-server`
3 把dist文件里的内容放到服务器里即可, 直接运行`live-server`

处理es6语法

现在的项目都是使用 ES6 开发的, 但是这些新的 ES6 语法, 并不是所有的浏览器都支持, 所以就需要有一个工具,帮我们转成 es5 语法, 这个就是: babel

Babel is a JavaScript compiler. ==> babel 是一个 JavaScript 编译器
webpack 只能处理 import / export 这个 es6 模块化语法而其他的 js 新语法,应该使用 babel 来处理

babel 英文网

babel中文网

webpack-babel-loader

安装 :

npm install -D babel-loader @babel/core @babel/preset-envbabel-loader 处理js
@babel/core 核心包
@babel/preset-env  处理es6 789....

配置

module: {rules: [{test: /\.js$/,exclude: /node_modules/,use: {loader: 'babel-loader',options: {presets: ['@babel/preset-env']   // 处理es6-最新   }}}]
}

或者创建 .babelrc

{"presets": ["env"]
}

模块化语法 (webpack-import)

1. 模块化语法的分类 (必记)

node的commonjs 规范 :
- 导入 : require()
- 导出 : module.exports = {}
es6的最新模块化语法
- 导入 : import
- 导出 : export

2. 介绍

模块中的变量或者函数等等都是只能在本模块使用, 其实模块想使用需要引入

3. 导出一个变量

导出一个变量

let num = 30let test = () => console.log(666)let obj = { name: 'zs', age: 60 }export default num  或者
export default obj  或者
export default test

引入

import res from './a'   // res 任意取名console.log(res)

4. 导出多个变量

导出多个变量

// 导出多个
export let tool1 = () => console.log(111)
export let tool2 = () => console.log(222)
export let tool3 = () => console.log(333)

引入

// { } 里面必须是固定名称
import { tool1, tool2, tool3 } from './a'
console.log(tool1)
console.log(tool2)
console.log(tool3)tool1()
tool2()
tool3()

取别名

import { tool1 as t1, tool2, tool3 } from './a'
console.log(t1)t1()

单文件组件 (webpack-vue)

1. 介绍

单文件组件

拷贝webpack环境文件 : webpack.config.js + package.json
注册组件

// index.js 
Vue.component('Demo', {template : `<div>组件</div>`
})
// 缺点无高亮

提出一个对象到一个模块中

// demo.js
let Demo = {template : `<div>组件</div>`
}
module.exports  = Demo
// 还是没有高亮

改在单文件组件

// demo.vue
<script>module.exports = {template : `<div>组件</div>`}
</script>

添加结构和样式

<template><div>组件</div>
</template>
<script>module.exports = {}
</script>
<style lang='less'>div {color : redfont-size :'40px'}
</style>

配置vue

// index.html
<div id="app"></div>// index.js
import App from './App.vue'
import Vue from 'vue'new Vue({// el 指定管理编辑el: '#app',// 渲染根组件render: (h) => h(App),
})

2. 配置

vue官网 => vue-loader

vue-loader

安装:

npm install -D vue-loader vue-template-compiler

配置

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')            # +++module.exports = {module: {rules: [// ... 其它规则{test: /\.vue$/,loader: 'vue-loader'                                         # +++}]},plugins: [// 请确保引入这个插件！new VueLoaderPlugin()                                             # +++]
}