目录
1、名字解释 bundle,chunk,module 是什么?
2、说说webpack中常见的Loader?解决了什么问题?
4、 less-loader 和 sass-loader的区别
6、面试题:、webpack 与 grunt、gulp 的不同?
7、webpack的cli配置中有--watch的观察模式 为什么还要配置服务?或者说devServer的优势是什么?
8、webpack 的构建流程是什么?从读取配置到输出文件这个过程
10、webpack已经有--watch了,为什么还要用server
一、webpack介绍
官网:webpack
本质上,webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时,它会在内部从一个或多个入口点构建一个 依赖图(dependency graph),然后将你项目中所需的每一个模块组合成一个或多个 bundles,它们均为静态资源,用于展示你的内容。
从 v4.0.0 开始,webpack 可以不用再引入一个配置文件来打包项目,然而,我们为了学习它的原理和感受打包的整个流程,主要的学习任务就是学习打包的配置文件如何配置,好让整个工程运作起来.
一些核心概念:
打包项目的入口文件配置,就是上面那个蜘蛛网的起点
打包完成以后的项目文件输出到哪里
打包的时候,解析某些类型的文件 需要按照语法去解析编码,不同类型的文件需求不同的加载器
具有某类功能的工具
可以在配置文件中设定开发模式,用于未来开发脚手架的配置
低版本浏览器不能用
Webpack 5 运行于 Node.js v10.13.0+ 的版本。
二、webpack环境安装
最新版本5.0+
npm install webpack webpack-cli -g //不指定版本,默认下载最新版本,全局安装以后直接使用
mkdir webpack-demo //创建项目文件夹,随意名字同js变量名规则
cd webpack-demo //进入项目文件夹
npm init -y //生成项目配置文件创建一个webpack.config.js的打包配置文件
代码:
module.exports={
项目入口配置,
项目出口配置,
加载器配置,
插件配置,
开发模式配置,
其他
}
1、 项目入口配置
在webpack.config.js文件中
module.exports = {
// 一、项目入口配置,
//第一种:直接配置入口文件
entry:__dirname+"/src/main.js" //默认是__dirname+"/src/index.js"
//第二种:配置基础目录,然后配置入口文件
context:__dirname+"/src", //basepath
entry: "./main.js" 相对于context的路径
//第三种:多入口
context:__dirname+"/src",
entry:["./test1.js","./main.js"] //输出时默认为main.js,而且全部打包在一起
//第四种:多入口 多出口
entry: {
a: "./src/main.js", // //输出时默认为a.js
test1: "./src/test1.js"
}
//第五种:入口配置
context: __dirname + '/app',
entry: {
//输出时默认为a.js
a: './test.js',
//输出时默认为pages文件夹下的b.js
b: { import: './test2.js', filename: 'pages/[name].js' },
//输出时默认为pages文件夹下的c666.js
c: { import: './test3.js', filename: 'pages/[name]666.js' },
//输出时默认为pages文件夹下的d+哈希值+666.js
d: { import: './test4.js', filename: 'pages/[name][hash]666.js' },
//输出时默认为pages文件夹下的e+3位哈希值+666.js
e: { import: './test5.js', filename: 'pages/[name][hash:3]666.js' }
}
}
总结:
1.[name]代表entry的当前属性名 [hash]代表哈希值
2.配置对象除了import和filename还有很多,比如做加载相关的asyncChunks,自行查官网了解
2、 项目出口配置
`output` 位于对象最顶级键(key),包括了一组选项,指示 webpack 如何去输出、以及在哪里输出你的「bundle、asset 和其他你所打包或使用 webpack 载入的任何内容」。
**webpack.config.js文件**
module.exports = {
mode: "none",
context: __dirname + '/app',
// entry:'./test.js',
entry: {
a: './test.js'
},
output: {
asyncChunks: true, //创建按需加载的异步 chunk。
path:__dirname+"/dist2",//输出的目录,绝对路径,默认dist
// filename: 'bundle.js', //输出的文件名
filename: '[name]-666-[id]bundle[hash:5].js', //输出的文件名,[hash:5]为5位哈希值,[id]为打包的chunk的id,[name]为入口的属性名,缺省则为mian,这几个一定记住 vue和react的css作用域-就是这个几个设计的
// library: 'hqyj',//库名
library: {
name: 'MyLibrary', //库名
type: 'var', //配置将库暴露的方式。('var'、'module'、'assign'、'assign-properties'、'this'、'window'、'self'、'global'、'commonjs'、'commonjs2'、'commonjs-module'、'commonjs-static'、'amd'、'amd-require'、'umd'、'umd2'、'jsonp' 以及 'system')
},
// libraryTarget: 'umd',//配置如何暴露 library,优先级比library高但是:[请使用 output.library.type 代理,因为我们可能在未来放弃对 output.libraryTarget 的支持。]
auxiliaryComment: 'Test Comment', //各种模块化导出技术的统一注释(把type设置为umd)
//各种模块化导出技术的分别注释(webpack允许你的项目使用各种模块化技术 它都可以识别并打包)
// auxiliaryComment: {
// root: 'Root Comment',
// commonjs: 'CommonJS Comment',
// commonjs2: 'CommonJS2 Comment',
// amd: 'AMD Comment',
// },
clean: true, // 在生成文件之前清空 output 目录
// clean: {
// dry: true, // 小黑窗打印而不是删除应该移除的静态资源
// },
// clean: {
// keep: /ignored\/dir\//, // 保留 'ignored/dir' 下的静态资源不删
// // keep(asset) {
// // return asset.includes('ignored/dir');//同上
// // },
// },
}
};
3、加载器loader
webpack 只能理解 JavaScript 和 JSON 文件,这是 webpack 开箱可用的自带能力。**loader** 让 webpack 能够去处理其他类型的文件,并将它们转换为有效 [模块](https://webpack.docschina.org/concepts/modules),以供应用程序使用,以及被添加到依赖图中。
**loader 用于对模块的源代码进行转换**。loader 可以使你在 `import` 或"加载"模块时**预处理文件**。因此,loader 类似于其他构建工具中“任务(task)”,并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言(如 TypeScript)转换为 JavaScript,或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中引入CSS文件!
当我们项目中用js引入css 就会出现解析打包失败的情况
3.1 css-loader & style-loader
//main.js文件:
import "./index.css"
import myaxios from "./myaxios.js"
import myaxios2 from "./myaxios2.js"
console.log(myaxios,myaxios2)
var a=100;
//webpack.config.js文件:
module.exports = {
mode: "none",
context: __dirname + '/src',
// entry:'./test.js',
entry: {
a: './main.js'
},
output: {
asyncChunks: true, //创建按需加载的异步 chunk。
path: __dirname + "/dist", //输出的目录,绝对路径,默认dist
// filename: 'bundle.js', //输出的文件名
filename: '[name]-666-[id]bundle[hash:5].js', //输出的文件名,[hash:5]为5位哈希值,[id]为打包的chunk的id,[name]为入口的属性名,缺省则为mian,这几个一定记住 vue和react的css作用域-就是这个几个设计的
// library: 'hqyj',//库名
library: {
name: 'MyLibrary', //库名
type: 'umd', //配置将库暴露的方式。('var'、'module'、'assign'、'assign-properties'、'this'、'window'、'self'、'global'、'commonjs'、'commonjs2'、'commonjs-module'、'commonjs-static'、'amd'、'amd-require'、'umd'、'umd2'、'jsonp' 以及 'system')
},
// libraryTarget: 'umd',//配置如何暴露 library,优先级比library高但是:[请使用 output.library.type 代理,因为我们可能在未来放弃对 output.libraryTarget 的支持。]
auxiliaryComment: 'Test Comment', //各种模块化导出技术的统一注释(把type设置为umd)
//各种模块化导出技术的分别注释(webpack允许你的项目使用各种模块化技术 它都可以识别并打包)
// auxiliaryComment: {
// root: 'Root Comment',
// commonjs: 'CommonJS Comment',
// commonjs2: 'CommonJS2 Comment',
// amd: 'AMD Comment',
// },
// clean: true, // 在生成文件之前清空 output 目录
// clean: {
// dry: true, // 小黑窗打印而不是删除应该移除的静态资源
// },
clean: {
// keep: /ignored\/dir\//, // 保留 'ignored/dir' 下的静态资源不删
keep(asset) {
// return asset.includes('ignored/dir'); //同上
return asset.includes('index.html');
},
},
},
module:{
rules:[
{test:/\.css$/,use:["style-loader","css-loader"]}
]
}
};
**外部文件形式生成css资源**
npm i mini-css-extract-plugin --save-dev
module: {
rules: [
//运行bundle时直接以style标签形式动态写入到页面
// {test:/\.css$/,use:["style-loader","css-loader"]},
{
test: /\.css$/,
//css生成到css文件中,项目中以<link>形式引入使用
use: [MiniCssExtractPlugin.loader, 'css-loader'] //use数组的加载是从后往前
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: '[hash].css' //css生成到css文件中,项目中手动以<link>形式引入使用
})
]
3.2 file-loader
项目中引入了常见类型(好多类型, 比如视频音频图片等等媒体编码)的文件,可以使用file-loader将其打包
npm i file-loader --save-dev
//main.js文件:
import "./index.css"
import myaxios from "./myaxios.js"
import myaxios2 from "./myaxios2.js"
import img1 from "./1.png"
import vd1 from "./1.mp4"
console.log(myaxios,myaxios2)
var a=100;
window.onload=function(){
var touxiang=document.createElement("img")
touxiang.src=img1
document.body.appendChild(touxiang)
var v=document.createElement("video")
v.src=vd1
v.controls=true
document.body.appendChild(v)
}
//webpack.config.js文件:
module: {
rules: [
//直接以style标签形式动态写入到页面
{test:/\.css$/,use:["style-loader","css-loader"]},
//项目中引入了以下结尾的文件就会启动file-loader
{test:/\.(png|jpg|jpeg|mp4|mp3)$/,use:["file-loader"]},
]
},
3.3 ts-loader
将 TypeScript 转为 JavaScript
npm install ts-loader webpack typescript --save-dev
项目中新建一个tsconfig.json文件(这是ts编译需要的配置文件)
//main.js文件:
import "./index.css"
import myaxios from "./myaxios.js"
import myaxios2 from "./myaxios2.js"
import img1 from "./1.png"
import vd1 from "./1.mp4"
import test from "./test.ts"
console.log(myaxios,myaxios2)
var a=100;
console.log(test(),111)
window.onload=function(){
var touxiang=document.createElement("img")
touxiang.src=img1
document.body.appendChild(touxiang)
var v=document.createElement("video")
v.src=vd1
v.controls=true
document.body.appendChild(v)
}
//webpack.config.js文件:
module: {
rules: [
//直接以style标签形式动态写入到页面
// {test:/\.css$/,use:["style-loader","css-loader"]},
{
test: /\.css$/,
//css生成到css文件中,项目中以<link>形式引入使用
use: [MiniCssExtractPlugin.loader, 'css-loader']
},
{test:/\.(png|jpg|jpeg|mp4|mp3)$/,use:["file-loader"]},
{ test: /\.ts$/, use: 'ts-loader' },
]
},
3.4 babel-loader
Babel 是一个 JavaScript编译器,它是一个工具链,主要的用途就是在旧的浏览器或环境中将ECMAScript 2015+ 代码转换为向后兼容的 js 代码。babel-loader就是用babel工具将ES6转成ES5的一种加载器. 在webpack打包时遇到js文件,就交给babel处理。
npm install babel-loader @babel/core @babel/preset-env webpack -D
//webpack.config.js文件
module: {
rules: [
//直接以style标签形式动态写入到页面
// {test:/\.css$/,use:["style-loader","css-loader"]},
{
test: /\.css$/,
//css生成到css文件中,项目中以<link>形式引入使用
use: [MiniCssExtractPlugin.loader, 'css-loader']
},
{test:/\.(png|jpg|jpeg|mp4|mp3)$/,use:["file-loader"]},
{ test: /\.ts$/, use: 'ts-loader' },
//exclude:/node_module/ 意思是下载的模块不转码,其他js文件转码
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: ['@babel/plugin-proposal-object-rest-spread']
}
}
}
]
},
总结:babel-loader 很慢!解决办法:要排除
node_modules
,参考文档中的 loaders 配置的exclude
选项。参考官网:https://webpack.docschina.org/loaders/babel-loader/#install
3.5 sass-loader
把Sass代码转化为css代码
npm install sass-loader sass webpack --save-dev
//mian.js文件:
import './style.scss';
//style.scss文件:
$color1: red;
.box {
color: $color1;
}
//webpack.config.js文件:
module: {
rules: [
{
test: /\.s[ac]ss$/i,
use: [
'style-loader', //不用单独引入 直接运行js代码 动态写入页面
'css-loader',
// 将 Sass 编译成 CSS
'sass-loader',
],
},
],
},
4、插件plugin
loader 用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。包括:打包优化,资源管理,注入环境变量。
可以这样理解: loader的关注点在某种类型的文件编码解析上,插件plugin是关注某一个功能点:比如托管服务器,错误语法检测,挂载打包代码到模板文件等等.
想要使用一个插件,你只需要
require()
它,然后把它添加到plugins
数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件,这时需要通过使用new
操作符来创建一个插件实例。
4.1 EslintWebpackPlugin
eslint插件是一个非常强大的语言查错工具, vscode 编辑器中有提供 eslint 插件,下载插件并启用,自动就可以检测代码的语法错误,但是它只在你写代码的时候提示,我们希望打包项目的时候有相关提示,就可以配置它.
eslint-webpack-plugin插件就是使用 [`eslint`](https://eslint.org/) 来查找和修复 JavaScript 代码中的问题。
*eslint-webpack-plugin 3.0 仅支持 webpack 5。对于 webpack 4 请查看* [2.x 分支](https://github.com/webpack-contrib/eslint-webpack-plugin/tree/2.x)*。*
环境准备:
npm install eslint-webpack-plugin --save-dev
如果未安装 `eslint >= 7` ,你还需先通过 npm 安装:
npm install eslint --save-dev
插件配置:
const ESLintPlugin = require('eslint-webpack-plugin');
module.exports = {
// ...
plugins: [new ESLintPlugin(options)],
// ...
};
//options的参数配置:
context:__dirname+"/src" //指定文件根目录
extensions:String|Array[String] //指定需要检查的扩展名.不配置默认为"js"
exclude:"node_modules" //指定需要排除的文件及目录。必须是相对于 options.context 的相对路径。
files:String|Array[String] //指定目录、文件或 globs ,必须是相对于 options.context 的相对路径。 如果是目录则递归查找所有匹配 options.extensions 选项的文件。
//测试时在main.js中故意写个错误语法:
let a=20;
let a=90;
4.2 HtmlWebpackPlugin
该插件将生成一个HTML5 文件, 在 body 中使用 `script` 标签引入你所有 webpack 生成的bundle.js。 但是每次生成的模板都是新的
[`HtmlWebpackPlugin`](https://github.com/jantimon/html-webpack-plugin) 简化了 HTML 文件的创建,以便为你的 webpack 包提供服务。这对于那些文件名中包含哈希值,并且哈希值会随着每次编译而改变的 webpack 包特别有用。你可以让该插件为你生成一个 HTML 文件,使用 [lodash 模板](https://lodash.com/docs#template)提供模板,或者使用你自己的 [loader](https://webpack.docschina.org/loaders)。
安装:
npm install --save-dev html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: 'index.js',
output: {
path:__dirname+'/dist',
filename: 'bundle.js',
},
plugins: [new HtmlWebpackPlugin()],
};
//该插件将为你生成一个HTML5 文件, 在 body 中使用 `script` 标签引入你所有 webpack 生成的bundle.js。
//但是每次生成的模板都是新的
如果希望用自己的html文件作为模板
可以在参数中进行配置:https://github.com/jantimon/html-webpack-plugin#options
补充:minify压缩配置太多 自行查文档:https://github.com/terser/html-minifier-terser
例子:
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: 'index.js',
output: {
path:__dirname+'/dist',
filename: 'bundle.js',
},
plugins: [new HtmlWebpackPlugin({
title: "hqyj-app", //html的标题默认为"Webpack App",
filename: "index.html", //模板html打包后生成的文件名,放在output.path里面,默认"index.html"
template: __dirname + "/public/index.html", //模板html文件的路径,
inject: "body", //'head' || 'body' 打包后的bundle挂载到模板html的位置:'body' 放置在body元素的底部。'head'将把脚本放在head元素中。,
publicPath: "./", //The publicPath used for script and link tags,
favicon:__dirname + "/public/favicon.ico", //打包前前前小图标的路径,默认为:"",
//"洗澡":压缩项配置
// minify:true,
minify: {
collapseWhitespace: true, //是否压缩HTML:空格回车
keepClosingSlash: true,//在单元素上保留末尾的斜杠 比如说<br/>
removeComments: true, //是否清除HTML注释
removeRedundantAttributes: true,
removeScriptTypeAttributes: true, //是否删除script的type属性(这个属性对于现代浏览器没啥用)
removeStyleLinkTypeAttributes: true, //是否删除< style>和< link>的type="text/css"
minifyJS: false, //是否压缩页内JS ,
minifyCSS: true //是否压缩页内CSS
},
cache:true,//仅当文件被更改时才重新打包,否则使用上一次打包时缓存起来的,默认true
})],
};
三、开发环境devServer
我们在开发项目时(development|dev), 常常需要一个本地服务器托管本地资源,比如你们用的vscode的右键open in server 的插件.我们可以在webpack集成的打包环境中配置本地服务器
安装: npm install --save-dev webpack webpack-dev-server webpack-cli
配置参数: https://webpack.js.org/configuration/dev-server/
module.exports = {
devServer: {
//告诉dev-server在服务器启动后打开浏览器。将其设置为true以打开默认浏览器。但是:如果你的电脑有防火墙或者有管理员权限的限制或者电脑很卡 可能不会自定打开浏览器
open: true, //cli中 webpack serve --open
//本地服务器监听的端口
port: 8080,
//启用热更新,直接使用webpack的热更新模块.就是改了代码自动打包后自定刷新浏览器页面:bug就是同open,记住 卡了就刷新一下不用纠结
hot: true,
//指定要使用的主机(localhost|ipv4|ipv6)。如果你想让你的服务器可以被外部访问,像这样指定:
//让你同桌访问 然后你改项目代码 他就会刷新
host: '192.168.2.60',
//启用gzip压缩
compress: true,
//代理配置,这里只是配置,不用写代理服务器的代码(配置好了它帮我们实现)
proxy: {
'/api': 'http://localhost:7001',
},
// proxy: {
// '/api': {
// target: 'http://localhost:7001',
// secure:true,//如果代理的target是https接口,需要配置它
// pathRewrite: { '^/api': '/chongxie' },//请求时重写pathname
// },
// },
}
}
配置好以后小黑窗的服务启动指令: **webpack server**
四、package.json指令相关
//package.json文件:
"scripts": {
"dev": "webpack server",
"build": "webpack"
},
//开发阶段 npm run dev 不会打包到磁盘
//生产阶段 npm run build 打包生成到磁盘
启动指令:
webpack
webpack server
cli指令:小黑窗中直接带参数,可以进行打包配置:webpack --watch
cli指令:小黑窗中直接带参数,可以进行打包配置:webpack server --config webpack.config.js
(cli是小黑窗的指令,不同的指令有不同的功能)
"dev":" webpack server --config myvueconfig.js"
"lint":"webpack server --config webpack.config.js"
"build":"webpack"
五、开发依赖和生产依赖
当我们的项目开发环境集成到现在,就可以开始做项目了,但是我们的项目中也会使用很多第三方SDK, 直接把模块js文件下载到node_modules中 然后引入到项目中 就可以使用了 比如
npm i axios --save
然后再main.js中引入:
import axios from "axios"
那么有一个问题.我们的项目依赖下载到node_modules中 环境依赖也是安装到node_modules中 ,很明显开发依赖只是开发阶段需要 比如css加载器,当开发完毕以后就不需要了.而项目依赖的axios的js代码 依然需要打包到生产代码中 为了区分 下载时就应当把这两类SDK分别标记
项目依赖:在pakage.json中写入dependencies,打包后的项目中会包含这些模块的代码
npm i 模块1,模块2,模块3 --save
npm i 模块1,模块2,模块3 (npm 版本>5.6)
npm i 模块1,模块2,模块3 -S
开发依赖 : 在pakage.json中写入devDependencies 打包后的项目中不会包含这些模块的代码
npm i 模块1,模块2,模块3 --save-dev
npm i 模块1,模块2,模块3 -D
六、面试题
1、名字解释 bundle,chunk,module 是什么?
答案:
1、module:开发中的每一个文件都可以看作是 module,模块不局限于js,也包含css,图片等
2、chunk:表示代码块,一个 chunk 可以由多个模块组成
3、bundle:最终打包完成的文件,一般就是和 chunk 一一对应的关系,bundle就是对 chunk 进行编译压缩打包等处理后的产出
2、说说webpack中常见的Loader?解决了什么问题?
答题模板:1.解释什么事loader 2.说出你用过或者了解的loader 3.说他们各自的特点和用途 4.说说你的亲身经历
答案:loader用于对模块的"源代码"进行转换,在
import
或"加载"模块时预处理文件
webpack
做的事情,仅仅是分析出各种模块的依赖关系,然后形成资源列表,最终打包生成到指定的文件中。在
webpack
内部中,任何文件都是模块,不仅仅只是js
文件默认情况下,在遇到
import
或者load
加载模块的时候,webpack
只支持对js
和json文件打包像
css
、sass
、png
等这些类型的文件的时候,webpack
则无能为力,这时候就需要配置对应的loader
进行文件内容的解析,当webpack
碰到不识别的模块的时候,webpack
会在loader配置的中查找该文件解析规则.loader根据不同文件的编码分类,有很多种,我在华清学习时,手动配置并使用过的loader如下:
style-loader: 将css添加到DOM的内联样式标签style里
css-loader :允许将css文件用js引入,并返回css代码
less-loader: 处理less
sass-loader: 处理sass
eslint-loader: 错误语法检测
postcss-loader: 用postcss来处理CSS
autoprefixer-loader: 处理CSS3属性前缀,已被弃用,建议直接使用postcss
file-loader: 分发文件到output目录并返回相对路径
url-loader: 和file-loader类似,但是当文件小于设定的limit时可以返回一个Data Url (比如base64编码的图片)
html-minify-loader: 压缩HTML
babel-loader :用babel来转换ES6文件到ES
ts-loader :用typescript来转换TS文件到JS
3、loader 和 插件plugin的区别
loader 用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。包括:打包优化,资源管理,注入环境变量。
可以这样理解: loader的关注点在某种类型的文件编码解析上,插件plugin是关注某一个功能点:比如托管服务器,错误语法检测,挂载打包代码到模板文件等等.
想要使用一个插件,你只需要
require()
它,然后把它添加到plugins
数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件,这时需要通过使用new
操作符来创建一个插件实例。
4、 less-loader 和 sass-loader的区别
5、url-loader 和 file-loader的区别
6、面试题:、webpack 与 grunt、gulp 的不同?
答案:
1、三者之间的区别 三者都是前端构建工具,grunt 和 gulp 在早期比较流行,现在webpack相对来说比较主流,不过一些轻量化的任务还是会用 gulp 来处理,比如单独打包CSS文件等
1.1grunt 和 gulp 是基于任务和流(Task、Stream)的。类似jQuery,找到一个(或一类)文件,对其做一系列链式操作,更新流上的数据,整条链式操作构成了一个任务,多个任务就构成了整个 web 的构建流程。
1.2webpack 是基于入口的。webpack 会自动地递归解析入口所需要加载的所有资源文件,然后用不同的 Loader 来处理不同的文件,用 Plugin 来扩展webpack功能。
2、构建思路的区别
2.1gulp 和 grunt 需要开发者将整个前端构建过程拆分成多个`Task`,并合理控制所有`Task`的调用关系
2.2webpack 需要开发者找到入口,并需要清楚对于不同的资源应该使用什么Loader 做何种解析和加工
3、 从知识背景区别
3.1gulp 更像后端开发者的思路,需要对于整个流程了如指掌
3.2webpack 更倾向于前端开发者的思路
7、webpack的cli配置中有--watch的观察模式 为什么还要配置服务?或者说devServer的优势是什么?
答案:devServer的功能是:当文件发生修改,通知各个模块进行更新加载,加载到计算机内存,刷新浏览器
1.项目中加载的东西很多.内存刷新 比磁盘刷新反应快
2.热更新使得开发调试效率更高
3.自动配置代理 比手动设计代理服务器更方便
8、webpack 的构建流程是什么?从读取配置到输出文件这个过程
答案:
webpack 的运行流程是一个串行的过程,从启动到结束会依次执行以下流程:
1、初始化参数:从配置文件和 Shell 语句中读取与合并参数,得出最终的参数
2、开始编译:用上一步得到的参数初始化 Compiler 对象,加载所有配置的插件,执行对象的 run 方法开始执行编译
3、确定入口:根据配置中的 entry 找出所有的入口文件
4、编译模块:从入口文件出发,调用所有配置的 Loader 对模块进行翻译,再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理
5、完成模块编译:在经过第 4 步使用 Loader 翻译完所有模块后,得到了每个模块被翻译后的最终内容以及它们之间的依赖关系
6、输出资源:根据入口和模块之间的依赖关系,组装成一个个包含多个模块的Chunk, 再把每个 Chunk 转换成一个单独的文件加入到输出列表,这步是可以修改输出内容的最后机会
7、输出完成:在确定好输出内容后,根据配置确定输出的路径和文件名,把文件内容写入到文件系统,在以上过程中,webpack 会在特定的时间点广播出特定的事件,插件在监听到感兴趣的事件后会执行特定的逻辑,并且插件可以调用webpack 提供的API改变 webpack 的运行结果
9、如何利用 webpack 来优化前端性能
1、压缩代码。uglifyJsPlugin 压缩 js 代码, mini-css-extract-plugin 压缩css代码
2、利用 CDN 加速,将引用的静态资源修改为 CDN 上对应的路径,可以利用webpack对于 output 参数和 loader 的 publicpath 参数来修改资源路径
3、删除死代码(tree shaking),css 需要使用 Purify-CSS
4、 提取 公共 代码集成为模块:假如项目中引入了多次相同nodule,webpack只会打包一次 。
10、webpack已经有--watch了,为什么还要用server
cli指令:小黑窗中直接带参数,可以进行打包配置:webpack --watch
七、CDN
CDN==>内容分发网络
公共库,大家一起使用
CDN依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取内容,降低网络延迟,提高访问速度。简单来讲,CDN是用来进行加速的,它可以让用户更快获得所需的数据。
比如axios,可以自己下载下来,引入。也可以直接用官网的,这个方法较好,
优点:
项目公共的东西尽量的用CDN托管
1、本地的缓存加速,让用户加载得更快
2、就近加载原则