webpack

webpack

1. 以一个或多个文件作为入口，将整个项目所有文件编译成一个或多个文件输出出去
2. 输出文件就是编译好的文件，可以直接在浏览器中运行
3. webpack输出文件叫做bundle

初始使用

初始

• npm init -y 初始化
• npm i webpack webpack-cli -D 下载依赖
• npx webpack ./src/main.js --mode=development 开发模式下打包

基本配置

• webpack.config.js 新建配置文件

输出配置

• 文件输出

output:{// 文件输出路径// __dirname 当前文件文件夹路径path: path.resolve(__dirname,"dist"),// 绝对路径// 文件名filename:"js/main.js",clean:true,// 打包前将dist清空},

• 图片输出

generator:{// 输出图片 hash 扩展名 参数// [hash:10] 10位hashfilename:'static/images/[hash][ext][query]'}

• 字体输出

{test:/\.(ttf|woff2?)/,// 只检测以.css开头文件type:'asset/resource',generator:{// 输出图片 hash 扩展名 参数// [hash:10] 10位hashfilename:'static/font/[hash:10][ext][query]'}},

loader

处理CSS文件

webpack中文文档

• npm install --save-dev css-loader
• npm i style-loader -D
• webpack.config.js写入

module.exports ={module:{rules:[{test:/\.css$/i,use:["style-loader","css-loader"],},],},};

处理less文件

• npm install less less-loader --save-dev
• npm install --save-dev css-loader
• npm i style-loader -D
• webpack.config.js写入

{test:/\.less$/i,// loader: [ // loader只能处理一个loader//     // compiles Less to CSS//     'style-loader',//     'css-loader',//     'less-loader',// ],use:[// use可以处理多个loader'style-loader','css-loader','less-loader',]},

处理图片资源

• webpack内部继承了file-loader和url-loader
• webpack.config.js写入

{test:/\.pnh|jpe?g|gif|svg$/,// 只检测以.css开头文件type:'asset',parser:{dataUrlCondition:{/**
              * 小于多少KB转base64
              * 优点：减轻服务器压力
              * 缺点：图片体积会变大
              */maxSize:60*1024,}}},

5个核心概念

entry（入口）

提示webpack从哪开始打包

output（输出）

提示webpack打包完文件到哪去，如何命名

loader （加载器）

webpack本身只处理js,json资源，需要借助loader，webpack处理

loader开发

• 下载npm i loader-utils
• 下载npm i schema-utils

plugins（插件）

扩展webpack功能

plugins开发

• 是一个类，在webpack执行时调用方法apply()方法，传入参数compiler
• 在thisCompilation实例化后可以拿到compilation

mode （模式）

• 生产模式 production
• 开发模式 development

处理JS资源

Eslint

• 文档
• npm install eslint-webpack-plugin --save-dev
• npm install eslint --save-dev
• webpack.config.js写入

plugins:[newESLintPlugin({// 检测那些文件context: path.resolve(__dirname,'src')})],

• 创建.eslintrc.js文件写入

module.exports={// 继承eslint规则extends:["eslint:recommended"],env:{node:true,// 启用node中全局变量browser:true,// 启用浏览器中全局变量},parserOptions:{ecmaVersion:6,// 使用es6sourceType:"module",},rules:{"no-var":2,// 不使用var定义变量},}

• 创建.eslintignore.js忽略代码检测

Babel

将es6语法转换为向后兼容代码

• npm install -D babel-loader @babel/core @babel/preset-env
• webpack.config.js写入

{test:/\.js$/,exclude:/node_modules/,// 排除XXX不处理use:{loader:'babel-loader',//   options: {//     presets: ['@babel/preset-env']//   }}},

• babel.config.js配置

module.exports={// 预设/**
     * @babel/preset-env
     * @babel/preset-react
     * @babel/preset-typescript
     */presets:['@babel/preset-env'],}

处理html资源

• npm install --save-dev html-webpack-plugin
• webpack.config.js写入

const HtmlWebpackPlugin =require('html-webpack-plugin');newHtmlWebpackPlugin({// 模板template:path.resolve(__dirname,'public/index.html')}),

搭建本地服务器&自动化

• npm i webpack-dev-server -D
• webpack.config.js写入

// 开发服务器devServer:{host:"localhost",// 地址port:"8080",// 端口open:true,// 自动打开},

• npx webpack serve

生产模式搭建

配置

1. 新建config文件夹，定义webpack.dev.js和webpack.prod.js
2. package.json文件中配置

"dev":"webpack serve --config ./config/webpack.dev.js","prod":"webpack --config ./config/webpack.prod.js"

CSS处理

1. css单独打包并通过外链式调用性能才好
2. npm install --save-dev mini-css-extract-plugin
3. 用MiniCssExtractPlugin.loader替换带style-loader

CSS兼容处理

1. npm install --save-dev postcss-loader postcss postcss-preset-env
2. webpack.prod.js配置

{loader:'postcss-loader',options:{postcssOptions:{plugins:[['postcss-preset-env',// 处理兼容],],},},},

1. package.json配置，告诉webpack应该兼容到什么程度

"browserslist":["last 2 version",// 取最近两个版本"> 1%",// 覆盖99%"not dead"// 过期版本不要 取交集]

提取公共样式

functiongetStyleLoader(pre){return[
        MiniCssExtractPlugin.loader,"css-loader",{loader:'postcss-loader',options:{postcssOptions:{plugins:[['postcss-preset-env',// 处理兼容],],},},},
        pre

    ].filter(Boolean)// 从右向左// filter过滤自动过滤掉pre传进来的null值}

// 需要的地方通过传参调用{test:/\.less$/i,use:getStyleLoader('less-loader')},

CSS压缩

1. npm install css-minimizer-webpack-plugin --save-dev
2. 插件中调用

newCssMinimizerPlugin(),

webpack优化

SourceMap

1. webpack输出式压缩后（编译后代码），出现错误不好查找，需借助与源代码与构建后代码映射关系
2. 启动映射文件

• 开发模式下

devtool:'cheap-module-source-map',

• 生产模式下

devtool:'source-map',

hot module replacement

1. 将打包后文件缓存，在有新的内容时只打包新文件
2. main.js中配置 // 判断浏览器是否支持热模块更新

if(module.hot){
    module.hot.accept('./js/sum')
    module.hot.accept('./js/count',function(count){
        console.log(count);})}

oneof

1. 在用loader处理文件时，让文件遇到自己匹配的第一个正则就停止
2. 在webpack.config中配置

{loader:[// 要用到的loader]}

Include/Exclude

1. node_modules中文件已经被编译过了，所以我们在编译过程中不需要再编译一次
2. Include || Exclude 1. include 只处理XXX文件2. exclude 除了XXX文件都处理
3. webpack.config配置

{test:/\.js$/,// exclude: /node_modules/, // 排除XXX不处理include: path.resolve(__dirname,'../src'),// 只处理src下的文件，其他文件不处理use:{loader:'babel-loader',//   options: {//     presets: ['@babel/preset-env']//   }}},

CaChe

1. 每次打包时都会对Eslint和Babel进行处理，但这样速度较慢，我们缓存每次处理后的结果，这样二次运行时只对新内容进行处理速度较快
2. webpack.config中配置

{loader:"babel-loader",options:{cacheDirectory:true,// 开启Babel缓存cacheCompression:false,// 关闭缓存压缩}}

newESLintPlugin({// 检测那些文件context: path.resolve(__dirname,'../src'),cache:true,// 开启缓存cacheLocation: path.resolve(__dirname,"../node_modules/.cache/cacheEslint"),// 缓存路径
     threads,// 开启多线程}),

1. 开启多线程模式进行优化
2. 引入内置OS模块，判断CPU模块数

const os =require('os');const threads = os.cpus().length;// 获取CPU核数

1. npm i thread-loader -D 下载多线程插件
2. webpack.config中配置

optimization:{minimizer:[newCssMinimizerPlugin(),newTerserWebpackPlugin({parallel: threads,// 开启多线程和设置进程数})]},

减小代码体积

Tree Shaking

1. tree shaking默认功能，会自动剔除掉没被使用的代码

Babel

1. babel会为每个文件插入辅助代码，导致体积变大
2. npm i -D @babel/plugin-transform-runtime
3. webpack.config中配置

{test:/\.js$/,exclude:/node_modules/,// 排除XXX不处理use:[{loader:"thread-loader",// 开启多线程options:{works: threads,}},{loader:"babel-loader",options:{cacheDirectory:true,// 开启Babel缓存cacheCompression:false,// 关闭缓存压缩plugins:['@babel/plugin-transform-runtime'],// 减小代码体积}}]},

压缩图片

1. 下载包 npm i image-minimizer-webpack-plugin imagemin --save-dev
2. 有损压缩与无所压缩 1. 有损压缩 npm install imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo --save-dev2. 无损压缩 npm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo --save-dev

优化代码运行性能

提取公共模块

1. 在打包时会将所有JS文件打包到一个JS文件中，对于首页渲染速度较慢，所以代码分割，页面需要用什么文件就加载哪个文件
2. SplitChunksPlugin进行修改

按需加载

1. 需要时在加载对应JS文件
2. import动态加载

单入口

1. npm i babel-eslint@8允许出现不出现顶层import
2. npm i eslint-plugin-import允许eslint动态导入

模块命名

1. 输出中配置

output:{// 文件输出路径// __dirname 当前文件文件夹路径path: path.resolve(__dirname,"../dist"),// 绝对路径// 文件名filename:"static/js/main.js",chunkFilename:"static/js/[name].js",clean:true,// 打包前将dist清空},

1. 引入时配置

document.getElementById('btn').onclick=function(){
    console.log(11111);// eslint不能识别动态导入，需要额外配置// /*webpackChunkName:"math"*/ webpack默认语法import(/*webpackChunkName:"math"*/'./js/count.js').then(({count})=>{
        console.log(count([1,2,3]))})}

Preload/Prefetch

1. 当我们运用路由懒加载时，当JS文件过大时，用户会感觉到明显卡顿，所以我们希望在浏览器空闲时对资源进行加载 1. perload告诉浏览器立即加载资源2. prefetch告诉浏览器空闲时加载资源
2. npm install --save-dev @vue/preload-webpack-plugin
3. webpack.config中配置

newPreloadWebpackPlugin({// rel: 'preload', // 采用preload// as: 'script', // 优先级rel:'prefetch',}),

runtime

1. 当A文件的依赖发生变化时，会导致A也会变化，所以我们将A的依赖的hash存入在一个runtime文件中，变化时再runtime中寻找，以更好缓存
2. webpack.config配置

runtimeChunk:{name:(entrypoint)=>`runtime~${entrypoint.name}.js`}

1. 需要缓存的地方修改，通过hash确定变与不变

newMiniCssExtractPlugin({filename:'static/css/[name].[contenthash:10].css',chunkFilename:'static/css/[name].chunk.[contenthash:10].css'}),

Core-js

1. core-js专门用来做ES6及以上API的polyfill
2. npm i core-js

PWA

1. 为浏览器提供离线访问功能
2. npm install workbox-webpack-plugin --save-dev
3. 注册生成main.js中

if('serviceWorker'in navigator){
    window.addEventListener('load',()=>{
        navigator.serviceWorker.register('/service-worker.js').then(registration=>{
            console.log('SW registered: ', registration);}).catch(registrationError=>{
            console.log('SW registration failed: ', registrationError);});});}

1. npm i serve -g 部署本地资源