【笔记】Webpack

最新推荐文章于 2024-05-22 13:52:22 发布
最新推荐文章于 2024-05-22 13:52:22 发布
阅读量828 收藏
点赞数
分类专栏： 笔记 文章标签： es6 前端 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CSDNJXZK/article/details/123745408
版权

Webpeack

1. 介绍

Webpack是一种前端资源构建工具，一个静态模块打包器（module bundler）

在 Webpack看来，前端的所有资源文件（js/json/css/img/less/…）都会作为模块处理

他根据模块的依赖关系进行静态分析，打包生成对应的静态资源（bundle）

2. 五个核心概念

2.1 Entry

入口（entry）指示Webpack以哪个文件为入口起点开始打包，分析构建内部依赖图

2.2 Output

输出（output）指示webpack打包后的资源bundles输出到哪里去，以及如何命名

2.3 Loader

Loader让Webpack能够去处理那些非js文件（webpack本身只理解js）

2.4 Plugins

插件（plugins）可以用于执行范围更广的任务，插件的范围包括，从打包优化和压缩，一直到重新定义环境的变量等

2.5 Mode

模式（Mode）指示Webpack使用相应模式的配置

选项描述特点
development会将process.env.NODE_ENV的值设为development。 启用NamedChunksPlungs和N阿么的M哦读了书PLUgin。能让代码本地调试运行环境
production会将process.env.NODE_ENV的值设为 production。启用FaglgDependencyUsagePlugin，FalgIncludedChunksPlugin，ModuleConcatenationPlugin，NoEmitOnErrorsPlugin，Occur人侧耳OrderPLUgin，SideEffectsFlagPlugin 和 UglifyJsPlugin。能让代码优化上线运行环境

打包指令

npm i webpack webpack-cli -D    // 安装webpack

// 开发环境

webpack ./src/index.js -o ./build/built.js --mode=development
// 生产环境


webpack ./src/index.js -o ./build/built.js --mode=production
  • 结论

webpack 只能打包 js/json 文件

生产环境和开发环境将es6 模块化编译成浏览器能识别的模块化

生产环境比开发环境多一个压缩js

3. webpack.config.js

webpage.config.js webpack 配置文件

作用： 指示webpack干哪些活 （当你运行webpack指令时，会加载里面的配置）

所有构建工具都是基于node平台运行的 模块化采用 common.js

// loder 下载 使用
// plugins 下载 引入 使用

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.export = {
    // 入口起点
    entry:‘./src/index.js’,
    // 输出
    output:{
        // 输出文件名
        filename:'',
        // 输出路径
        // __dirname nodejs 的变量，代表当前文件的目录的绝对路径
        path:resolve(__dirname,'build')
    },
    // loder 的配置
    module:{
        rules:[
            // 详细的loder配置
            {
                // 匹配哪些文件
                test:/\.css$/,
                use:[    
                    // use执行顺序 自下到上 自右到左
                   // 创建style标签 将js中的样式资源添加到head中生效
                    'styele-loader',
                    // 将css文件编程commonjs模块加载js中，里面内容是样式字符串
                    'css-loader'
                ]
            },
            //    匹配less
            {
                test:'/\.less$/',
                use:[
                    'styele-loader',
                    'css-loader',
                     // 将less转换为css   注意需要下载 less 和 less-
                    'less-loder'
                 ]
             },
             //    匹配img
            {
                test:'/\.(jpg|png|gif)$/',
                loader:'url-loader',  // 只引入一个可以使用字符串
                options:{
                    // 图片大小 小于8kb 就会被base64处理
                    // 优点 减少请求数量（减轻服务器压力），缺点：文件体积会变大
                    limit:8*1024,
                    // 问题：url-loder 默认是es6模块化解析 而html-loader 
                    // 引入图片是commonjs 所以解析会出问题 
                    esModule:false,
                    // 给图片重命名 [hash:10] 去吐排尿前十位hash值  [ext]取图片原来拓展名
                }
                    name:'[hash:10].[ext]'
             },
              //    匹配 html的img图片
            {
                test:'/\.html$/',
                loader:'html-loader',  // 只引入一个可以使用字符串

            },
            // 打包其他资源（除了html/js/css 资源以外的资源）
            {
                // 排除css/js/html 资源
                exclude:/\.(css|js|html|less)$/,
                loader:'file-loader',
                options:{
                    name:'[hash:10].[ext]'
                }
            }
        ]
    },
    // 插件
    plugins:[
        // 详细配置
        new HtmlWebpackPlugin({
            // 复制 ./src/index.html 文件  并自动引入打包输出的所有资源（js、）
            template:'./src/index.html'
        })
    ],
    // 模式
    mode:'development' // 开发模式
    // mode:'production'  // 生产

    // dev-Server   // npm webpack-dev-server -D
    devServer:{
    contentBase:resolve(__dirname,'build'),
    // 启动gzip压缩
    compress:true,
    // 端口号
    port:3000,
    // 自动打开浏览器
    open:true
}
}

4. devServer

开发 服务器 devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）

特点：只会在内存中编译打包，不会有任何输出

启动devServer指令为：npx webpack-dev-server

5. 提取css为单独文件

  • 引入插件 mini-css-extract-plugin

  • 使用插件

  • 使用插件的loader 替换 style-loader

    module:{
    rules:[
        {
            test:'/\.css$/',
            use:[
                // 取代style-loader 作用：提取js中的css成单独文件
                MiniCssExtractPlugin.loader,
                'css-loader'
            ]
        }
    ]
},
plugins:[
    new MiniCssExtractPlugin({
        // 对输出的css文件进行重命名
        filename:'css/built.css'
    })
]

6. css 兼容性处理

  • postcss —> psotcss-loader postcss-preset-env

  • 使用 loader 在loader配置plungins

    npm i psotcss-loader postcss-preset-env -D

    webpack.config
// 设置node环境变量 为 开发环境
process.env.NODE_ENV = 'development'

module:{
    rules:[
        {
            test:'/\.css$/',
            use:[
                // 取代style-loader 作用：提取js中的css成单独文件
                MiniCssExtractPlugin.loader,
                'css-loader',  // loader 的默认写法
                // loader 的配置写法
                {
                    loader:'postcss-loader',
                    options:{
                        ident:'postcss',
                        // 配置插件 作用：帮postcss找到package.josn中的
                        // browerslist里面的配置，通过配置加载指定的css兼容
                        plugins:()=>{
                            require('postcss-preset-env')()
                        }
                    }
                }

            ]
        }
    ]
},

// package.json 文件
 ”browerslist“:{
 // 开发环境 --> 需要在webpack.config.js 中设置环境变量：
 //process.env.NODE_ENV = developement
 "development":[
 "last 1 chrome version" // 兼容最近的谷歌
 "last 1 firefox version" // 兼容最近的火狐
 "last 1 safari version" // 兼容最近的safari
 ],
 // 生产环境：默认是看生产环境（如果不配置node环境变量的话）
 "production":[
 // 兼容大部分浏览器 不兼容启用的 不兼容欧朋mini
 ">0.2%",
 "not dead",
 "not op_mini all"
 ]
 }

## 7. 压缩css文件

- optimize-css-asset-webpack-plugin 插件

```js
const OptimizeCssAssetsWebpackPlugin require('optimize-css-asset-webpack-plugin')


plugins:[
    new OptimizeCssAssetsWebpackPlugin()
]

8. eslint 语法检查

语法检查 依赖：eslint-loader eslint

    module:{
    rules:[
        {
            test:'/\.js$/',
            // 忽略
            exclude:/mode_modules/,
            loader:'eslint-loader',
            options:{
                // 自动修复eslint 的错误
                fix:true
            }
        }
    ]
},


// package.json 文件
"eslintConfig":{
     "extends":"airbub-base"       
 }
 // airbub ->>> eslint eslint-config-airbub-base eslint-plugin-import

js 兼容性处理

js兼容性处理：babel-loader @babel/core

1. 基本js兼容性处理 --》 @babel/preset-env

2.需要作兼容处理的就做：按需加载 --》 core-js （这两个结合使用）

module:{
    rules:[
        {
            test:'/\.js$/',
            // 忽略
            exclude:/mode_modules/,
            loader:'babel-loader',
            options:{
                // 预设
                presets:[
                    [
                        '@babel/prest-env',
                        {
                            //按需加载
                            useBuitIns:'usage',
                            // 指定core-js版本
                            corejs:{
                                version:3
                            },
                            targets:{
                                chrome:'60',
                                firefox:'60',
                                ie:'9',
                                safari:'10',
                                edge:'17'
                            }
                        }
                    ]
                ]
            }
        }
    ]
},

js 和 html 压缩

1. js文件在production 环境会自动压缩

2. html压缩

// 在HtmlWebpackPlungin 里添加minify配置


minify:{
    // 移除空格
    collapseWhitespace:true,
    // 移除注释
    removeComments:true
}

优化

生产环境优化

  • 优化打包构建速度

  • 优化代码运行的性能

开发环境优化

  • 优化打包速度

  • 优化代码调试

HMR

hot module replacement 热模块替换

作用：一个模块发生变化，只会重新打包这一个模块，极大提升构建速度

devServer:{
    contentBase:resolve(__dirname,'build'),
    // 启动gzip压缩
    compress:true,
    // 端口号
    port:3000,
    // 自动打开浏览器
    open:true,
    // 开启HMR  改了webpack 需要
    hot:true
}

  • 样式文件：可以使用HMR功能，因为style-loader内部实现了

  • js文件：默认不能使用HMR功能， 注意：HMR功能对js的处理，只能处理非入口js文件的其他文件

  • html文件：默认不能使用HMR功能，同时会出现问题：html文件不能热更新了

    解决：修改entry 入口 将html文件引入

    // 入口起点
    entry:['./src/index.js','./src/index.html'],

source-map

source-map ： 一种 提供源代码到构建后代码映射技术 （如果构建后代码出错，通过映射可以追踪到代码错误）

module.export = {
    entry:'',
    ...
    devtool:'eval-source-map' // 开发环境推荐
    // devtool:'source-map'  // 生产环境推荐

}

oneOf

// 一下loader只会匹配一个   注意不能有两个配置处理同一个类型文件（oneOf提升构建速度）
module:{
    rules:[
        oneOf:[
            {},
            {},
            ...
        ]
    ]
}

缓存

  • babel 缓存

    cacheDirectory:true 让第二次打包速度更快

     {
            test:'/\.js$/',
            // 忽略
            exclude:/mode_modules/,
            loader:'babel-loader',
            options:{
                ....
            }
             // 第二次构建会读取之前缓存
            cacheDirectory:true
        }

  • 文件资源缓存

    hash：每次webpack构建都会生成一个唯一的hash值

    问题：因为js和css同时使用会有一个一样的hash值 如果重新打包，会导致所有缓存失效（可能没有改动所有资源）

    chunkhash：根据chunk生成的hash值，如果打包来源于一个chunk，那么hash值一样

    问题：css在js中被引入 属于一个hash

    contenhash：根据文件内容生产hash，不同文件值不一样

    作用： 让代码运行缓存更好使用

    // 用法
 filename:'css/built[contenthash:10].css'

tree shaking

  • 前提：1. 必须使用es6 模块化 2. 开启production

  • 作用： 减少代码体积 去除无用代码

在package.json 中配置

"sideEffects":false    // 所有代码都没有副作用 （都会进行tree shaking）
                        // 问题：可能会把 css / @babel/polyfill 文件干掉
"sideEffects":["*.css"]

code split

  1. 通过写单入口 和 多入口
多入口写法: entry:{    

                            index:'./js/index.js',

                            test:'./js/test.js'

                    }
  1. 配置optimization

  • 可以将node_modules中的代码单独打包到一个chunk最终输出

  • 自动分析多个入口chunk中，有没有公共的文件，如果有会打包成一个单独的chunk

optimiazation:{

   splitChunks:{

       chunks:'all'

}

}
  1. 通过js代码，让某个文件被单独打包成一个chunk

import动态导入语法：能将某个文件单独打包

PWA

Progressive Web Application，全称“渐进式网页应用”，是谷歌主导的一种新时代网页（应用）。

简单的理解，就是你的网页，可以通过某种方式达到离线使用。

  • eslint 不认识window，navigator全局变量

    解决：修改package.json 中 eslintConfig配置

    “env”:{

    “borwer”:true

    }

  • sw代码必须运行在服务器上

// 下载并引入 workbox-webpack-plugin
// 在plugins 中使用
new WorkboxWebpackPlugin.GenerateSw({
    // 帮住serviceworker快速启动  删除就得serviceworker
    // 生成一个serviceworker 配置 文件
    clientsClaim:true,
    skipWaiting:true
})


// 在入口文件注册serviceworker
// 注册一个serviceworker  处理兼容性问题 
if('serviceworker' in navigator) {
    window.addEventListener('load',()=>{
        navigator.serviceworker
            .register('/service-worker.js')
            .then(()=>{
                console.log('sw注册成功了')
            })
            .catch(()=>{
                console.log('sw注册失败了')
            })
    })
}

多进程打包

依赖 npm i thread-loader -D

  • 开启多进程打包 进程启动大概为600ms, 进程通讯也要有开销 只有工作消耗时间较长，才需要多进程
{
            test:'/\.css$/',
            use:[
                // 取代style-loader 作用：提取js中的css成单独文件
                MiniCssExtractPlugin.loader,
                'css-loader',  // loader 的默认写法
                {   // 写在需要多进程的loader 后面（因为loader自下而上）
                    loader:'thread-loader',
                    options:{
                        workers:2  // 进程
                    }
                },
                // loader 的配置写法
                {
                    loader:'postcss-loader',
                    options:{
                        ident:'postcss',
                        // 配置插件 作用：帮postcss找到package.josn中的
                        // browerslist里面的配置，通过配置加载指定的css兼容
                        plugins:()=>{
                            require('postcss-preset-env')()
                        }
                    }
                }

            ]
        }

externals

externals:{
    // 拒绝JQ被打包进来
    juqery:"jQuery"
}
// 同时CDN 引入

dll

plugins:[

    // 告诉webpack那些库不参与打包，同时使用时名称也得
    new webpack.DllReferencePlugin({
        manifest: resolve(__dirname,'dll/manifest.json')
    })
    // 将某个文件打包输出去，并在html中自动引入
    new AddAssetHtmlWebpackPlugin({
        filepath:resolve(__dirname,'dll/jquery.js')
    })
]

// 新建一个webpack.dll.js     
// 使用dll技术，对某些库（第三方）单独打包
// 当运行webpack时  默认去找webpack.config.js  所有要用 wenpack --config webpack.dell.js

const {resolve} = require('psth')
const webpack = require('webpack')

module.export = {
    entry:{
        // 最终生产[name] --》 jquery   ['jquery'] --> 要打包的库时juqery
        jquery:['jquery']
    },
    output:{
        filename:'[name],js'
        path:resolve(__dirname,'dll'),
        library:'[name]_[hash]'  // 打包库里面想外暴露的
    }，
    plugins:[
        // 打包生成一个manifest.json --》 提供和jquery映射
        new webapck.DllPugin({
            name:'[name]_[hash]',
            path:resolve(__dirname,'dll/manifest.json')  // 输出文件路径
        })
    ],
    mode:'production'
}
Justkang前端
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Webpack笔记.md
04-13
webpack的搭建和项目的整体的构架
webpack
weixin_46727994的博客
05-17 104
这东西想要学习好多次，但是都没有坚持啊学完，现在还是一头雾水，整备找教程学，但是好像和当前版本差别比较大，算了，这次跟着官方文档学，能学多少学多少。 概念 js程序的静态模块打包器，递归构建依赖关系图，其中包含程序包含的模块，把模块打包成一个或者多个bundle（捆，束缚） 高度可配置，灵活性高 四个核心概念 入口 输出 loader 插件 入口（entry） 简单，就是webpack从哪个模块开始构建依赖和打包，找相关依赖打包到dunles 单个入口的写法 entry: string|Ar
webpack 干货总结
一只倔强的蜗牛的博客
05-12 238
一、概述： webpack 是一个模块打包工具！ 官网地址 官方文档查阅技巧： concepts：概念 configuration：配置项 loaders：官方相关loader guides：指南 1. npm 使用npm（node包管理工具）创建一个符合node规范的项目，生成包管理文件package.json npm init 注：要想用webpack...
笔记webpack
weixin_39283936的博客
11-05 106
一、初始化项目结构： mkdir webpackDemo // 创建项目 cd webpackDemo // 进入项目 mkdir app // 在项目中创建app文件 mkdir common // 在项目中创建common文件 cd app // 进入app文件夹 touch app.js // 创建app.js文件 touch main.js // 创建main.js文件 cd … //返回...
js逆向笔记webpack断点笔记
weixin_46468720的博客
10-20 393
例如，188模块中，调用了175模块(n(175))，要定位到175模块的代码，需要在return e(t).call(r.exports,r,r,exports,f)处打断点，其实此时的n(175)，就是加载器的f(175),关于模块加载器代码分析上一篇博文有记录。1.webpack遇到扣出来的模块A还调用其它模块B的时候，还要定位到B模块并把代码扣出来的情况。跟进去的方法有两种：1，鼠标放到n.n上点击进去。2.在控制到输入n.n，在出现的结果中点击进去。
总结万字长文笔记webpack5打包资源优化
军火库
08-24 1845
1、webpack如何做，主要是两种optimization中设置，但是要配合terser压缩插件才会生效optimization中设置,在中设置去除无副作用的代码，但是注意css引入会当成无副作用的代码，此时需要在rules的css规则中标记,这样就不会删除css了2、webpack的gizp压缩 主要是利用官方提供的这个插件3、css如何做, 主要是利用这个插件，会将没有引用css删除4、入口依赖文件拆包第一种是在入口文件entry中分包处理，将依赖的第三方库独立打包成一个公用的。
webpack学习笔记
09-26
webpack学习笔记，总结了实际开发过程中的实际问题，并进行了梳理，便于直接查找使用；同时也对于目前市面上的资源进行了借鉴，梳理成为可以简单查找，就可以找到对应的思路，便于使用，方面了自己，也节省了时间。
webpack详细笔记和配置
12-04
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。...
webpack.md
02-27
自学webpack 笔记 webpack只是一个打包模块的机制，只是把依赖的模块转化成可以代表这些包的静态文件。并不是什么commonjs或者amd之类的模块化规范。webpack就是识别你的 入口文件。识别你的模块依赖，来打包你的...
Es6-对象新增了哪些扩展？
唯见青山不见君
05-16 1035
Es6-对象新增了哪些扩展？
ES6+新特性
qq_37004501的博客
05-16 199
在原字符串填充指定的填充字符串直到目标长度所形成的新字符串，例子。
vue3.0+antdv的admin管理系统vue-admin-beautiful推荐
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
05-15 1161
几年前，笔者自学了vue这一优秀的前端框架，但苦于没项目练手，无意间发现了这一优秀的前端集成框架。当时就使用它做了一很有意思的小项目---终端监控云平台，实现了前端和后台的整体功能。整体方案介绍参见博文《》，前端使用vue-admin-beautiful框架，后端使用go-zero微服务框架，几天内就搞出来了一个包含前端和后台的小项目。我的monitor-ui前端运行界面：后续有机会介绍下我这个终端监控云平台小项目的具体实现，挺有意思的。几年前还用到过几个地方的公交客户现场，客户挺喜欢这个功能的。
Nodejs util file getpost web express child_process mogodb
ooo
05-18 905
Nodejs util file getpost web express child_process mogodb
综合性练习-验证码
cj13106811623的博客
05-15 848
生成验证码param(参数): 无Return: 图片的内容校验验证码用户输入的验证码5. 代码编写生成验证码://图型验证码写出,可以写出到文件,也可以写出到流try {//返回到浏览器修改前端代码相对应的接口验证成功。
【VueRouter 的基本使用】
2302_76611599的博客
05-17 183
完成Vue Router 安装后，就可以使用路由了，路由的基本使用步骤，首先定义路由组件，以便使用Vue Router控制路由组件展示与 切换，接着定义路由链接和路由视图，以便告知路由组件渲染到哪个位置，然后再项目中创建路由模块，最后导入并挂载路由模块。为了在页面中将路由对应的组件显示出来，还要在App组件中定义路由视图。路由视图标签定义，该标签会被渲染成当前路由对应组件，另外，为了方便在不同组件之间切换，可以通过标签定义路由链接，该标签的to属性表示链接地址，与路由匹配规则中的path属性对应。
React函数式组件的父子方法互相调用，父组件调用子组件方法，子组件调用父组件方法
SongZhengxing_的博客
05-18 185
子组件需要使用 forwardRef 函数包裹，然后使用 useImperativeHandle 暴露属性和方法。编写子组件 Child。
VUE3注册指令的方法
weixin_44072254的博客
05-22 176
【代码】VUE3注册指令的方法。
前端开发攻略---用Vue实现无限滚动的几种方法
最新发布
nibabaoo的博客
05-22 405
用vue实现无限滚动
性能监控系统搭建——node_koa实现性能监控数据上报（第一章）
编程知识分享，主打前端
05-19 776
大家好，我是yma16，本文分享node_koa实现性能监控数据上报（第一章）。为了实现前端性能耗时的数据监控，前端对外发布js的sdk，sdk的功能主要是性能耗时计算和数据上报。同时使用vue3和node开发一个数据监控的后台管理系统，主要功能是展示数据，提供一个api_key和token对外暴露的api接口去添加数据监控数据。对外暴露性能上报接口，用户通过api_key请求上报数据到后台。
js逆向笔记webpack
05-31
以下是一些关于Webpack逆向的笔记： 1. Webpack的打包过程是从入口文件开始的，Webpack会递归地遍历所有依赖模块，并将它们打包成一个或多个Bundle文件。因此，逆向工程的第一步就是找到Webpack打包的入口文件。 2...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值