webpack
客户端 静态资源服务器 接口服务器
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
五个核心概念
- Entry：入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始
- Output：output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件
- Loader：loader 让 webpack 能够去处理那些非 JavaScript 文件
- Plugins：插件则可以用于执行范围更广的任务。例如：打包优化、压缩
- Mode：模式，有生产模式 production 和开发模式 development
1 node包的查找机制
node对包进行以下处理：
1. 遍历module.paths数组查找对应包名下的package.json文件.
通过JSON.parse()解析出包描述对象,
通过其中的main属性的文件名进行再次定位查找,
如果该文件名没有扩展名,再次按照之前的文件扩展名补足方式进行补足(js json node)
2. main属性指定的文件名错误,或者当前目录不存在package.json文件,
Node会把index当做默认文件名，依次查找 index.js | index.json | index.node.
3. 如果在目录分析的过程中没有成功定位到任何文件或目录,
则按照module.paths,遍历该路径数组,如果都不存在就报错
2 webpack包的查找机制
安装 npm i webpack@4.44.2 webpack-cli@3.3.12 -D
① 模块化打包：webpack [entry] -o [output]
配置脚本 package.json
运行 npm run webpack
安装lodash: npm i lodash
1. 找别名
resolve:{
alias:{
//$: 重新让lodash具备了包的能力
lodash$:path.resolve(__dirname, 'src/damu.js'),
}
}
2. 找resolve.modules(默认值为node_modules)指定的文件夹
3. 找对应的包
-- 有package.json
按照顺序查找 resolve.mainFields(默认值['browser', 'module', 'main']) 配置选项中指定的字段
-- 没有package.json
按照顺序查找 resolve.mainFiles(默认值['index']) 配置选项中指定的文件名
文件扩展名通过 resolve.extensions (默认值['.wasm', '.mjs', '.js', '.json'])选项
注意：
-
配置别名webpack.config.js 可以不用在node_modules中去找
-
配置了别名就不用在原来的包配置（别名的优先级大于包），可以加$，可以在别名和包之间切换
3 webpack基本使用
安装webpack：npm i webpack@4.44.2 webpack-cli@3.3.12 -D
配置webpack:新建webpack.config.js配置文件
const path = require('path');
module.exports = {
entry: './index.js',
output: {
filename: 'index.js',
path: path.resolve(__dirname, 'dist')
},
//确定webpack中是如何去找模块的（可以不用）
resolve:{
alias:{
//
lodash$:path.resolve(__dirname, 'src/damu.js'),
}
}
};
使用webpack： 在webpack.config.js同级目录下敲webpack
4 公共需求
4.1 处理js
① webpack默认就可以打包ES6模块化代码（处理模块化语法）
② 使用babel处理es6的兼容性问题（语法：不包含模块化语法 API）
配置babel
安装：
npm install --save-dev babel-loader @babel/core
配置babel-loader：在webpack.config.js中
module:{
rules:[
{
test:/\.js$/,
use:’ babel-loader’,
exclude:’/node_modules/’
}
]
}
安装预设套餐处理语法的兼容性问题：babel-presets
npm install @babel/preset-env --save-dev
① 安装es6全局衬垫代码处理API的兼容性问题：业务级别
npm install @babel/polyfill --save
配置：直接在入口文件引入衬垫 import ‘@babel/polyfill’
配置.babelrc可以不用引入了，直接实现按需引入衬垫("useBuiltIns":"usage")：
npm install core-js@3 --save
babel的配置：
{
"presets":[
["@babel/preset-env",
{
"useBuiltIns":"usage",
"corejs":3
}
]
]
}
② 安装es6局部衬垫代码处理API的兼容性问题：第三方库级别的兼容性问题
npm install @babel/plugin-transform-runtime --save-dev
npm install @babel/runtime
npm i @babel/runtime-corejs3
配置:新建 .babelrc 文件
{
"presets":[
"@babel/preset-env"
],
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"corejs":3
}
]
]
}
4.2 处理css
用link标签每次都要加载 作为模块引入，但是打包会报错
（^托字符 注意要降某些lode的版本 npm i npm webpack ）
#### ① 处理原生CSS
1. 安装配置style-loader 和 css-loader
2. 在js文件中直接import 样式表文件
```js
npm i style-loader css-loader postcss-loader postcss -D
配置postcss环境:
安装autoprefixer: npm i autoprefixer -D
抒写.postcssrc.js
const autoprefixer = require("autoprefixer");
module.exports={
plugins:[
autoprefixer()
]
}
配置loader
{
test:/\.css$/,
use:[
"style-loader",
"css-loader",
"postcss-loader"
]
}
② 如何使用less
在1的基础上;加上less-loader less
安装: npm i less less-loader -D
配置loader
{
test:/\.less$/,
use:[
"style-loader",
"css-loader",
"postcss-loader",
"less-loader"
]
}
③ 如何使用postcss
安装配置postcss-loader postcss **autoprefixer ** 并写配置.pastcss.js
4.3 处理HTML
① 自动生成Html 并注入打包生成的js文件
使用HtmlWebpackPlugin插件
npm install html-webpack-plugin --save-dev
引入 webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
配置：自动生成HTML文件
plugins:[
new HtmlWebpackPlugin({
filename:"index.html", //最终打到output的名称
template:"./index.html", //html模板
inject:true //自动注入打包后的js文件呢
})
]
② 每次打包自动清除dist目录
安装
npm install clean-webpack-plugin --save-dev
引入
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
配置
plugins:[
new CleanWebpackPlugin ()
]
③ 如何在Html中引入图片
首先要配置图片相关的loader: 使用html-loader
npm install html-loader -D
{
test:/\.html$/,
use:[
{
loader:'html-loader',
options:{
attributes:true
}
}
]
}
4.4 处理静态资源（图片 字体）
① 需要引入的loader
file-loader:让webpack可以将静态资源纳入管理
url-loader:base64编码
② CSS中引入图片
安装配置file-loader后，webpack就可以自动处理图片了
npm file-loader -D
{
test:/\.(jpg|jpeg|png|gif)$/,
use:[
{
loader:"file-loader",
options:{
publicPath:"./dist/img", //发布目录
outputPath:"img", //输出目录
name:"[name].[hash:8].[ext]" //静态资源最终的名称
}
}
]
}
注意：
publicPath:定义发布目录：最终heml文件如何去寻找静态资源
默认情况下html文件找资源是基于输出目录的，相对的根路径是基于output的
当html直接不处于output所指定的目录下
outputPath：定义输出目录：静态资源最终被打包什么路径下
Base64编码
将file-loader 替换为url-loader（注意是替换）
npm i url-loader -D
{
loader:'url-loader',
options:{
limit:10000, //都支持所有file-url的配置
}
}
limit:10000, 以10kb为界限规定是否要base64
如何处理字体文件
安装配置url-loader后，webpack就可以自动处理字体文件了
自定义字体图标 https://www.iconfont.cn/ https://icomoon.io
5 开发环境（开发服务器）
webpack-dev-server
区别：fis3可以启动服务，而webpack-dev-server不仅可以启动服务，还可以有webpack的功能
安装
npm install webpack-dev-server --save-dev
注意：不用引入 ，webpack-dev-server不会生成打包文件。其打包的所有资源都存在于内存中
配置：
devServer:{
port:8080, //指定服务器的端口
host:"127.0.0.1" //指定主机
}
运行：
在packafe.json中的script中配置
"scripts": {
"server":"webpack-dev-server --open chrome"
}
功能：
自带功能:自动刷新–live reloading
完成以上配置后自带live reloading（自动刷新浏览器）
功能：即一修改代码会立刻重新编译 页面重新渲染
模块热更新(热模替换)
修改代码后进行局部更新，节省调试时间。并且可以保持应用的数据状态。
安装
npm install webpack --save-dev
webpack.HotModuleReplacementPlugin :内置插件
引入
const webpack = require('webpack') 或者
内置插件可直接引入,用解构赋值
const {HotModuleReplacementPlugin} = require('webpack')
配置：
module.exports :{
devServer:{
port:3333,
hot:true
}
引入插件：服务与css
plguins: {
new webpack.HotModuleReplacementPlugin()
}
注意：
-
修改html不会触发模块热更新。我们只能手动刷新
-
修改css会触发模块热更新，但这一切都依赖于style-loader
-
原生js的模块热更新是需要开发者借助于API自己实现的。当然相应的框架（vue reat…）会有自身的配套插件。但原生js没有插件能够使其支持模块热更新。建议使用原生js开发时不要考虑使用模块热更新的功能
相关API：
-
module.hot: 表示 [模块热替换(Hot Module Replacement)]是否启用
-
module.hot.accept
module.hot.accept() 接受当前模块自身的更新
优化代码调试 (Source Map)
作用：优化调试。
安装：不需要任何安装
引入：不需要任何引入
配置：
module.exports: {
devtool:'inline-source-map'
}
强约束Eslint
安装:
npm i eslint eslint-loader eslint-friendly-formatter -D
eslint-friendly-formatter: 报错时友好的输出模式
module:{
rules:{
{
loader:'eslint-loader',
options:{
formatter:require("eslint-friendly-formatter")
}
}
}
eslint-loader要放在babel-loader之前来处理 即配置位置要在后
devServer.overlay:使 eslint的报错信息打到浏览器上
devServer:{
overlay:true
}
6 fis3 服务器
fis.baidu.com
安装
npm i fis3 -g
打开fis3静态资源服务器的根目录
fis3 server open
将资源发布到fis3静态资源服务器
fis3 release
启动fis3静态资源服务器
fis3 server start
清除fis3静态资源服务器的根目录
fis3 server clean
关闭fis3静态资源服务器
fis3 server stop
查阅
fis3 start -h
499
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
