定义
Webpack是一个前端构建工具，可以将所有资源（包括Javascript，图像，字体和CSS等）打包后置于依赖关系中，使你可以按照需求引用依赖来使用资源。其实也就是模块打包器。
核心概念
- 入口 entry webpack导入文件的起点
- 出口 output 导出到哪
- 插件 plugin 处理事情
- 加载器 loader 加载处理特殊文件
webpack如何实现跨域
devServer:{
proxy:{
xxx:{}
}
}
webpack loader和plugin的区别
loader用于加载并处理文件
Plugin 扩展功能
插件 加载器
css-loader: 处理和分析css依赖
html-webpack-plugin: 把css插入到header文中
less
less-loader: 处理less文件
mini-css-extract-plugin: 把css抽出为一个单独的文件
optimize-css-assets-webpack-plugin: 优化css和css资源
style-loader: 处理html模板
webpack: webpack本地服务器
webpack-cli: webpack
webpack-dev-server: webpack脚手架
浏览器缓存（强缓存）
当用户去请求页面的时候，会去请求很多文件。如果请求的文件名称，地址，在浏览器的缓存列表里面存在，那么浏览器就不会发起http请求，直接从缓存里面读取（提高二次加载速度）；
一个域名有两个页面，先访问A页面，需要xxx.js，B页面也需要xxx.js，由于之前访问过A，xxx.js已经存在，直接从缓存中读取文件，提高页面的加载数据；
webpack实现功能
当文件内容都发生改变了，生成的文件名要变化，当内容没有发生改变，保存文件名一致。
webpack魔法名称
[hash:7]每次构建项目 创建的标识符（取7位）
[contenthash]每次根据内容创建的标识符
[name]文件名称
[ext]文件的后缀名
webpack如何实现按需加载
import(xxx)
.then(res=>{})
webpack如何加载字体文件
file-loader
url-loader + 可以把小文件转base64
babel用途是什么？
ES6/7 转化为浏览器可以识别的js语法
polufill的作用是什么？
ES6转ES5
图片与文件处理
- file-loader 解析项目中url引入，使它指向正确的文件；
- url-loader 会将小图片生成base64编码格式；
- image-webpack-loader 插件可以将大图进行压缩，从而缩小打包体积；
- html-loader html代码里处理img标签的loader；
[代码如下]：
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports={
devServer: {
contentBase: './dist',
},
optimization: {
minimizer: [ new OptimizeCSSAssetsPlugin({})],
},
// mode:'production',
entry:'./src/index.js',
output:{
filename:'main-[hash].js',
path:__dirname+'/dist'
},
module:{
rules:[
{
test: /\.(png|jpg|gif|jpeg|ico)$/,
use:[{loader:'url-loader',options:{limit:50000,name: 'img/[name].[hash:5].[ext]'}},'image-webpack-loader']
},
{
test:/\.css$/,
use:[MiniCssExtractPlugin.loader,/* 'style-loader', */'css-loader']
},
{
test:/\.(eot|woff2|woff|ttf|svg)/,
use:[{loader:'url-loader',options:{limit:10,name: 'font/[name].[hash:5].[ext]'}}],
},
{
test:/\.less$/,
use:[MiniCssExtractPlugin.loader,/* 'style-loader', */'css-loader','less-loader']
}
]
},
plugins:[
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template:'./src/index.html'
}),
new MiniCssExtractPlugin({
filename: 'style.css',
}),
]
}
babel与react
@babel/core-babel核心模块
@babel/preset-env-编译ES6等
@babel/preset-react-转换JSX
cnpm i babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime @babel/preset-react -D
@babel/plugin-transform-runtime: 避免 polyfill 污染全局变量，减小打包体积
@babel/polyfill: ES6 内置方法和函数转化垫片
cnpm i @babel/polyfill @babel/runtime -D
main.js如下
import ReactDom from 'react-dom'
import React,{Component} from 'react'
class App extends Component{
constructor(props){
super(props);
this.state={num:1}
}
render(){
return (react )
}
}
ReactDom.render(webpack.config.js如下：
{
test: /\.(js|jsx)$/,
use:['babel-loader'],
exclude: /node_modules/
},
.bablerc如下：
{
"presets": ["@babel/preset-env","@babel/preset-react"],
}
压缩
- optimize-css-assets-webpack-plugin css优化压缩
- uglifyjs-webpack-plugin js压缩
代码分割
optimization: {
splitChunks: {
chunks: "all",
// 所有的 chunks 代码公共的部分分离出来成为一个单独的文件},
},
sourceMap
可以知道源代码在哪一行错误，sourceMap是一个map关系；
Prefetch
Prefetch是告诉浏览器这是一个在未来可能使用到的资源。 浏览器通常会在空闲状态取得这些资源，在取得资源之后搁在HTTP缓存以便于实现将来的请求
总结：
webpack中特殊的文件名称写法：
[hash:7] 哈希值7位
[contenthash]内容哈希
[name]原来的名字
[ext] 后缀名
用来清理dist文件夹
const {CleanWebpackPlugin} = require(' clean-webpack-plugin')
自动补齐前缀
postcss-loader
{loader:' postcss-loader',
options:{
plugins:[require(' autoprefixer')]
}
}
加载文件-小文件base64
filter-loader
{loader:' url-loader' ,options:limit:2000,name:img/[namel].hash:5].[ext] ,esModule: false}
limit大小限制
esModule导入内容模块为false
压缩图片
image-webpack-loader