webpack笔记

最新推荐文章于 2024-09-05 12:11:21 发布
最新推荐文章于 2024-09-05 12:11:21 发布
阅读量932 收藏 1
点赞数
分类专栏： webpack 文章标签： webpack 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_62860882/article/details/128601835
版权
Webpack是一个模块打包工具，它能处理项目中的依赖关系，将模块打包成浏览器可运行的JS代码。文章介绍了Webpack的基本用法，包括配置入口和输出，处理CSS和图片，以及开发环境的配置如热更新和代理服务。同时，提到了如何根据不同环境进行配置差异，如开发和生产环境的设置。
摘要由CSDN通过智能技术生成

webpack notes😃😃😃

webpack是什么？webpack是一个打包工具。当前环境下模块化开发的趋势非常盛行。主要有Common.js和module。但浏览器并不能运行我们直接运行各项目包之间的关系。即使将他们放置在一个入口文件中，那么webpack的目的就是将这些包的之间的依赖关系处理成我们浏览器中所能运行的js代码。打包并不是单纯的代码打包，还是整体过程的一个优化。

典型例子：vue中为什么可以使用import 导入 react中为啥可以使用module

1.webpack入门😃

安装一下webpack webpack-cli 建议局部安装，如果团队里面webpack版本不一样，会造成打包的代码不一样，协作会出问题

先来看一个简单的例子

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>





    <script src="./index.js"></script>
</body>

</html>

A.js

function printA() {
    console.log('A');
}
export default printA

B.js

function printB() {
    console.log("B");
}
export default printA

index.js

import A from './A/A'
import B from './B/B'

如果不使用webpack打包的话，会报错===Uncaught SyntaxError: Cannot use import statement outside a module

如果我们引入打包后的文件 ，将不会报错。

默认情况下，webpack入口文件是src/index.js 输出文件是 dist/main.js

2.配置文件😃

修改出口，入口等配置信息。我们有两种信息，

第一种是通过命令来修改

webpack --entry ./src/app.js

这个入口文件就是src下面的app.js

第二种是通过webpack配置文件

​ 默认情况下，webpack在执行的时候会自动地去寻找看是否有webpack.config.js这个配置文件。如何修改呢？

也是在命令的时候修改

webpack.config.js

const path = require('path')
module.exports = {
	//入口文件
    entry: './src/index.js',
    output: {
        //文件名
        filename: 'index.js',
        //文件夹
        path: path.join(__dirname, './build')//path配置项需要绝对路径
    }
}

webpack --config 配置文件名字

3.css样式配置😃

我们打包的时候，如果有==css文件，需要进行配置==，webpack才能正常进行打包。一般，配置这些资源处理模块的，都放在module配置项当中—module！要处理css，需要安装css-loader,style-loader：前者是处理css各模块之间的依赖关系（处理import和require之间的关系） 后者是将处理的css文件放在页面当中。来看一个例子

const path = require('path')
module.exports = {
    entry: './index.js',
    output: {
        filename: 'index.js',
        path: path.join(__dirname, './build')
    },
    module: {
        rules: [
            //css
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            //less
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            //静态资源处理
            {
                test: /\.(jpg|png|webp)$/,
                type: 'asset/resource'//这个是内置包
            }
        ]
    }
}

4.图片打包名字🥰

webpack给我们提供了一个变量

[name] 之前文件名

[ext] 之前后缀名

[hash:] 表示生成number位的hash值

在module/rules/generator里面配置打包后的名字🥰

const path = require('path')


module.exports = {
    entry: './index.js',
    output: {
        filename: 'index.js',
        //文件夹名必须是绝对路径
        path: path.join(__dirname, './build')
    },
    module: {
        rules: [
            {
                test: /\.css/,
                use: ["style-loader", "css-loader"]
            },
            {
                test: /\.png/i,
                type: 'asset/resource',
                generator: {
                    filename: "[name][ext]"
                }
            }
        ]
    }
}

但这样的方法，难免会有命名重复的图片，这个时候，在打包的时候，会产生分歧，此时我们就要用添加hash值来命名图片名称。

const path = require('path')


module.exports = {
    entry: './index.js',
    output: {
        filename: 'index.js',
        //文件夹名必须是绝对路径
        path: path.join(__dirname, './build'),
        clean: true
    },
    module: {
        rules: [
            {
                test: /\.css/,
                use: ["style-loader", "css-loader"]
            },
            {
                test: /\.png/i,
                type: 'asset/resource',
                generator: {
                    filename: "[name].[hash:6][ext]"
                }
            }
        ]
    }
}

这种生成静态文件的命名方式也是Vue中打包的形式。

5.图片base64格式🥰

对于小型图片，我们可以打包成base64格式的图片。base64的原理就是将图片的各个像素点生成出来！ 这样，可以减少网络请求。大型图片不建议生成base64的格式，因为这样，base64文件非常大，导致页面代码会非常冗杂。

base64格式

 {
                test: /\.png/i,
                type: 'asset/inline'
            }

6.图片混合解析🥰

大图片采用拷贝的方式，小图片采用base64的方式。

const path = require('path')


module.exports = {
    entry: './index.js',
    output: {
        filename: 'index.js',
        //文件夹名必须是绝对路径
        path: path.join(__dirname, './build'),
        clean: true
    },
    module: {
        rules: [
            {
                test: /\.css/,
                use: ["style-loader", "css-loader"]
            },
            {
                test: /\.png/i,
                type: 'asset',
                generator: {
                    filename: '[name].[hash][ext]'
                },
                //设置成base64的最大值
                parser: {
                    dataUrlCondition: {
                        maxSize: 10 * 1024
                    }
                }
            }
        ]
    }
}

7.自动清理打包目录🥰

在webpack5之前，通过clean-webpack-plugin来清理

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
 plugins: [
        new CleanWebpackPlugin()
    ]

在webpack5，我们可以通过output里面的配置：

output:{
	clean:	true
}

8.自动生成html文件🥰

插件 —html-webpack-plugin

const HtmlWebPackPlugin=require(html-webpack-plugin)
plugins:[
    	new HtmlWebpackPlugin()
]

一个重要项：template 让webpack生成的html文件在这个文件上进行添加生成。

9.监听webpack🥰

利用webpack自带的watch参数，写一个脚本来运行这个watch。在package.json里面配置

scirpts:

“watch”:“webpack --watch”

10.开发工具🥰

能够追溯到报错信息具体在哪里

devtool:'inline-source-map'

11.页面热更新🥰

先下载 webpack-dev-server

在配置选项里面配置：

​ 开启服务，入口文件

devServer:{
	static:'./dist'
}

​ 然后通过webpack server来启动这个服务，不会产生生成的静态文件夹，文件通过内存来加载(不是通过磁盘)，实现实时更新。–open自动打开页面

热更新🥰

局部刷新—加快效率以及速度

devServer:{
	static:'./dist',
	hot:true
}

然后在入口文件里面配置 通过module.hot

if (module.hot) {
    module.hot.accept(
        [
            './public/input/1'
        ]
    )
}

12.browserslist🥰

browserslist是浏览器的配置选项，主要用来搭配一些兼容性的问题！在package.json里面配置。

通过npx browserslist可以查看浏览器。

常见配置项(兼容性)：

配置多少版本的浏览器，筛选哪部分的浏览器

13.处理css兼容问题:🥰

插件postcss-loader

​ 还是放在**use**里面，采用==对象==写法：

use:[
    {
        loader:'',
        options:{
            postcssOptions:{
                plugins:[
                    require(插件)
                ]
            }
        }
    }
]

目前：我们在项目中所要使用的基本配置已经完成了

webpack.config.js

const path = require('path')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')


module.exports = {
  mode: 'development',
  entry: "./src/index.js",
  output: {
    filename: "js/index.js",
    path: path.resolve(__dirname, "./dist")
  },
  module: {
    rules: [
      //css
      {
        test: /\.css$/i, //正则
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1 //css文件遇到了import先交给前一步处理
            }
          },
          /*
          * 需要安装基于postcss-loader的插件
          *
          * autoprefixer
          * */
          'postcss-loader'
        ]
      },
      //less
      {
        test: /\.less$/i,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1
            }
          },
          'postcss-loader',
          'less-loader'
        ]
      }
    ]
  },
  //插件
  plugins: [
    //打包时自动清理上次的打包文件夹
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      //标题
      title: "Hello Webpack!",
      //模板
      template: "./public/index.html"
    })
  ]
}

postcss.js

module.exports = {
  plugins: [
    require("postcss-preset-env")
  ]
}

14.处理js兼容🥰

babel-loader 需要结合整合包进行操作

​ @babel/preset-env

​ webpack的配置项

处理原生api的转换

15.copy-webpack-plugin🥰

将模板中的静态资源直接复制到dist目录下

16.ts🥰

ts-loader typescript

ts工作原理：先将ts转成js，只要js配置好了，就没问题（在解析原生api，高版本js的情况）

ts语法错误情况下还生成dist目录。解决办法：

tsc && webpack

等tsc执行完成后，再执行webpack

17.配置vue🥰🥰🥰

首先安装vue–支持vue，vue@next—表示vue的最新版本

vue-loader 加载vue的文件

@vue/compilier-sfc 解析vue的文件

18.配置代理服务🥰🥰🥰

代理本质:通过node创建一个服务器，向后端发送数据请求，服务端与服务端之间不存在跨域！

devServer:{
	proxy:{
		'/':'http://localhost:3000'//表示当前所有跟路经情况都向3000端口发送请求。
	}
}

有时候，不需要所有路径都发送

proxy:{
	"/api":{
		target:"http://localhost:3000"
		pathRewrite:{"^/api",""}
	}
}

19.开发环境和生产环境🥰🥰🥰

development production 有时候，我们有些配置是要在开发环境下用到的，但在生产环境不需要的。

一般是

在打包生成文件夹的时候，会指定为生产环境。

package.json/scripts

"build":"webpack  --env production"
"server":"webpack server --env development"

webpack.config.js配置

const path = require("path")
const {CleanWebpackPlugin} = require("clean-webpack-plugin")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const CopyWebpackPlugin = require("copy-webpack-plugin")
const {VueLoaderPlugin} = require("vue-loader")

const config = {
  entry: "./src/index.js",
  output: {
    filename: "js/index.js",
    path: path.resolve(__dirname, "./dist")
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: "Hello Webpack!",
      template: "./public/index.html"
    }),
    new CopyWebpackPlugin({
      patterns: [{
        from: "./public",
        //排除 index.html
        globOptions: {ignore: ["**/index.html"]}
      }]
    }),
    new VueLoaderPlugin()
  ],
  module: {
    rules: [
      //css
      {
        test: /\.css$/i,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: 1
            }
          },
          "postcss-loader"
        ]
      },
      //less
      {
        test: /\.less$/i,
        use: [
          "style-loader",
          "css-loader",
          "postcss-loader",
          "less-loader"
        ]
      },
      //图片
      {
        test: /\.(jpg|png|jpeg|gif|webp)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'images/[name].[hash:8][ext]'
        }
      },
      //字体
      {
        test: /\.(ttf|woff2?)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'font/[name].[hash:4][ext]'
        }
      },
      //视频/音频
      {
        test: /\.(mp3|mp4|ogg|avi)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'media/[name].[hash:4][ext]'
        }
      },
      //js -- 利用babel-loader
      {
        test: /\.js$/i,
        use: ["babel-loader"]
      },
      //vue
      {
        test: /\.vue$/i,
        use: ['vue-loader']
      }
    ]
  }
}

module.exports = (env)=>{
  if (env.development){
    config.mode = "development"
    config.devServer = {
      proxy: {
        /*"/user": "http://localhost:3000",
        "/admin": "http://localhost:3000"*/
        "/": "http://localhost:3000"
        /*"/proxy": {
          target: "http://localhost:3000",
          pathRewrite: {"^/proxy": ""}
        }*/
      }
    }
    config.devtool = "source-map"
  }else{
    config.mode = "production"
  }

  return config
}
SYK---Programm
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
browserslist 选项的目的是什么？
liuhao9999的博客
08-29 279
在 Vue 2.6 版本中，使用 v-slot 指令提供了新的插槽语法，该指令与 Vue 3.0 的语法保持一致。它旨在提供干净、语义化和可重用的组件，使构建应用程序更容易。VueJS 提供了 compile 方法，用于将模板字符串编译成渲染函数。即该选项将立即使用表达式的当前值触发回调。社区插件和组件可能需要针对不同版本的不同策略。方法来了解当前的 Vue 实例是在服务器上运行还是在客户端上运行。以字符串形式提供已安装的 Vue 版本。比如可以根据不同的版本实现不同的逻辑。例如，您可以将其声明如下，...
Webpack笔记
赤蓝紫の博客
01-28 1016
Webpack笔记 参加字节跳动的青训营时写的笔记。这部分是范文杰老师讲的课。 插一嘴：范文杰老师的公众号Tecvan有很多干活，可以关注一下。(下面的部分有好多都有很有用的扩展链接，偷懒，就直接把老师的公众号贴出来) 1. 简介 Webpack本质上是一种前端资源编译、打包工具。 功能： 多份资源文件打包成一个Bundle 支持Less、Babel、Eslint、TypeScript 支持模块化处理css、图片等资源文件 支持HMR(热更新) 支持Tree-shaking 支持SourceMap ,
WebPack 笔记
weixin_51457459的博客
05-11 679
WebPack 笔记前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np i
Webpack 笔记
weixin_45746811的博客
11-27 577
webpack
【webpack 笔记】基础内容
JT61100的博客
06-07 323
所谓工程化，可以简单认为是将框架的职责拓宽再拓宽，主旨是帮业务团队更好的完成需求，工程化会预测一些常碰到的问题，将之扼杀在摇篮，而这种路径是可重用的，是具有可持续性的，比如第一个优化去除冗余，是在多次去除冗余代码，思考冗余出现的原因而最终思考得出的一个避免冗余的方案说到构建工具，我往往会在前面加「自动化」三个字，因为构建工具就是用来让我们不再做机械重复的事情，解放我们的双手的要完成前端工程化，少不了工程化工具，requireJS 与 grunt 的出现，改变了业界前端代码的编写习惯，同时他们也是推动前端工程
webpack 笔记
海胆的博客
06-22 312
webpack4 官方文档 entry 规定入口文件，一个或者多个 output 规定输出文件的位置 loader 各个类型的转换工具 （rules） plugin 打包过程中各种自定义功能的插件 重要内容 tree-shaking ( 减少打包后的体积 ) Magic Comments : 魔法注释 /* webpackChunkName: vendor*/ webpack-dev-server postcss-loader 处理不用的浏览器厂商前缀 ...........
webpack笔记(黑马)
qq_51141492的博客
04-19 1638
文章目录1.webpack的默认规定2.webpack插件1、webpack-dev-server2、html-webpack-plugin3、devServe节点3.webpack中的loader1、打包处理css文件2、打包处理less文件3、图片loader加载问题4、webpack 处理样式的过程5、url-loader的limit选项6、babel-loader转化处理高级JS语法。4.项目发布上线1、配置built命令2、优化图片和js文件的存放路径3、插件clean-webpack-plugi
Webpack笔记.md
04-13
webpack的搭建和项目的整体的构架
webpack笔记.md
08-11
webpack笔记
Adela2012#blog#webpack笔记1
07-25
An entry point indicates which module webpack should use to begin building out i
前端原生js与vue,git,webpack笔记---嘻嘻
03-24
前端原生js与vue,git,webpack笔记
优化 Webpack 打包体积的思路
乐辞的博客
09-01 497
优化 Webpack 打包体积的思路，引入如 UglifyJsPlugin 等代码压缩插件，可以有效地压缩 JavaScript 代码，减小文件体积。这样不仅减少了打包体积，还利用了 CDN 的缓存优势，提高加载速度。配置中选择合适的选项，以确保开发阶段能够提供足够的错误追踪信息，同时不会增加过多的打包体积。：检查并移除不必要的插件，根据环境区分开发和生产配置，避免将调试工具打包到生产环境中。
vue-virtual-scroller插件实现不等高表格虚拟滚动
Hi_MrXiao的博客
09-02 645
这是因为vue-virtual-scroller插件使用了超过浏览器理解的js代码，需要转换为旧版es5规范的代码浏览器才能正常执行。对于大量的表格数据加载，如果我们全部加载不仅面临加载等待时间长，容易崩溃的问题，还有可能导致浏览器缓存数据量大而导致页面使用卡顿的情况。在页面中使用，不等高的列表需要使用DynamicScroller+DynamicScrollerItem这种方式。加载来优化这种情况，在这里我们使用插件vue-virtual-scroller来实现虚拟滚动。使用过程中可能存在的问题。
webpack加载器、demo和核心工作原理
weixin_40507158的博客
09-01 1282
3.代码拆分的能力 ：把代码可以按照我们的需要打包，我们可以把应用加载过程中初次运行的所必须的模块都打包在一起，其他的模块我们可以单独存放，等实际中需要用到那个模块，我们再去异步加载这个模块，从而实现增量加载或者是渐进式加载，这样的话我们就不用担心文件太大/太碎这两个极端的问题。然后它会去顺着我们入口文件当中的代码，根据代码中出现的import或者像require之类的语句，然后解析推断出来这个文件所依赖的资源模块。那webpack会根据我们的配置找到其中的一个文件作为打包的入口。
【前端面试】Webpack、Rollup 和 Gulp 构建工具了解
最新发布
hhhh
09-05 823
Webpack：适合复杂的前端应用构建，提供了丰富的插件生态系统和灵活的配置选项。Rollup：适合库和工具的打包，特别是当你需要发布模块化代码时，Rollup 可以提供更优的打包结果。Gulp：适合自动化构建流程，通过编写任务来处理各种开发中的任务。在实际开发中，这些工具可以根据项目需求和团队习惯进行选择和搭配使用。例如，一个项目可能同时使用 Webpack 来处理 JavaScript 模块打包，使用 Gulp 来自动化其他构建任务。
Vue3安装Element Plus
m0_74963840的博客
08-30 639
安装 Element Plus**，然后您就可以使用打包工具，例如。如果你对打包后的文件大小不是很在乎，那么使用完整导入。如果需要使用Element Plus的样式还需要引入。在Vue项目的vite.config.js文件中添加。在下方的的代码区域将源代码粘贴到需要的位置即可。以下将参考Element Plus官网。对于 Nuxt 用户，只需要安装。然后将下面的代码写入你的配置文件.在main.js文件中添加。然后把下列代码插入到你的。在选好需要用到的组件后。
Vue -- 总结 02
2301_78949452的博客
08-30 1798
Vue脚手架，创建的文件结构，App.vue，动态绑定绑定属性
webpack-01
LH2HA3的博客
09-02 411
因为一个项目webpack的配置项可能会有很多，如果还在webpack.json中的命令中添加参数，后续会非常难以维护。因为webpack.config.js配置文件就应运而生，我们可以将命令行参数在这个文件中维护。为了解决这个问题，社区提供了webpack-dev-server,在开发阶段开发者不用打包就能调试自己代码。webpack 是webpack核心，webpack-cli 是webpack的命令行工具，装了它就可以使用npx 命令了。5、webpack-dev-server简化开发时的打包工作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值