Webpack

爱抽烟的老汉2024-04-01 10:40

(5条消息) webpack看这一篇就够了_itpeilibo的博客-CSDN博客

Webpack

简介:

Webpack的创始人是德国工程师Tobias Koppers(托比亚斯.科伯斯) ，他是Webpack的核心开发者之一。他于2012年开始 开发Webpack，并于2013年开源发布第一个版本。

Webpack 是一个现代JavaScript应用程序的静态模块打包器 ，也是个开源的前端打包工具。 要使用Webpack 前须先安装Node.js。 Webpack 可以通过更改 Webpack.config.js 来设置各项功能。

本质上，webpack是一个用于现代JavaScript应用程序的静态模块打包工具

静态模块打包器：

它分析应用的模块结构，处理和打包各种资源和文件，生成浏览器可以直接运行的静态资源。Webpack是最知名的例子。

打包工具：

打包工具是一种用于处理、组合、压缩和优化网站和应用程序资源 （如JavaScript, CSS, HTML文件）的工具。它们通常用于将多个文件或模块合并成少量的打包文件，以优化加载速度和性能。

常见的打包工具

  1. Webpack：广泛用于复杂应用的模块打包。
  2. Vite：现代化开发服务器，利用原生ESM，快速重载。
  3. Parcel：零配置打包工具，易于使用，适合小到中型项目。
  4. Rollup：更适合于库和框架的打包，支持ES模块。
  5. Browserify ：允许在浏览器中使用Node.js风格的require。

为什么要用Webpack：

  1. 模块化支持：管理和打包项目的多个模块和依赖。 --为管理模块提出的方法
  2. 性能优化：通过代码拆分和懒加载，提高加载速度和性能。 --提高加载速度
  3. 插件系统：提供丰富的插件，扩展功能和自定义构建过程。 --插件扩展广泛
  4. 开发效率：热模块替换等特性提升开发体验。 --开发效率提高
  5. 广泛兼容：支持多种前端资源和编程语言。 --兼容性强

优点：

优点：
  • 高度可配置：提供丰富的配置选项，适用于复杂和高度定制的项目。 --配置丰富
  • 强大的插件生态：有大量社区支持的插件，可以扩展其功能。 --插件扩展广泛
  • 广泛的兼容性：支持多种模块格式和第三方库集成。 --兼容性强
  • 优化策略：如代码拆分和懒加载，有利于性能优化。 --性能优化

Webpack核心及概念：

Webpack 是代码编译工具，有

1.入口(entry)：指定Webpack开始构建内部依赖图的起始点。

2.输出(output)：定义Webpack打包后的资源bundles放在哪里，以及如何命名。

3.Loaders：允许Webpack处理非JavaScript文件，并将它们转换为模块。

4.插件(plugins)：扩展Webpack功能的组件，用于执行各种各样的任务。

5.模式(mode)：设置development或production来启用Webpack内置的优化功能。

入口（entry）：
复制代码 
简易示例：
//单入口--字符串
module.exports = {
  entry: './path/to/my/entry/file.js',
};
//多入口--数组
module.exports = {
  entry: ['./src/index.js', './src/add.js']
};
//多入口--对象
module.exports = {
  entry: {
    home: './home.js',
    about: './about.js',
    contact: './contact.js'
  }
};
输出（output）：
复制代码 
简易示例：
const path = require('path')

module.exports={
    entry:'./file.js',	// 入口文件
    // 输出配置
    output:{
        path:path.resolve(__dirname,'dist'),     // 输出文件夹，使用path.resolve()方法解析相对路径，这里是./dist
        filename:'boundle.js'    // 输出文件的名称，这里是boundle.js
    }       
}
Loaders：
复制代码 
简易示例：
module.exports={
// 输出配置
    output:{},
    // 模块配置
    module:{
    	// 规则配置
        rules:[
        	// 使用正则表达式匹配.txt文件，并将它们加载为raw-loader
           { test:/\.txt/ , use: 'raw-loader' } 
           // { test: /\.txt$/, use: ['raw-loader', 'css-loader'] }
        ]
    }   
}
插件（plugins）：
复制代码 
简易示例：
const HtmlWebPackPlugin = require('html-Webpack-plugin');   // 导入HtmlWebPackPlugin
cosnt Webpack = require('Webpack');   // 导入Webpack

// 定义配置对象
module.exports={
	//模块配置
    module:{
        [
        	// 使用正则表达式匹配.txt文件，并将它们加载为raw-loader
            { test: /\.txt$/, use: 'raw-loader' }
        ]
    },
    plugins:[
    // 创建一个HtmlWebPackPlugin实例，用于生成HTML文件
        new HtmlWebPackPlugin ({
        template:'./src/index.html'		// 指定HTML模板文件，这里是./src/index.html
        })
    ]
}
模式(mode)：

production（生产模式）：不设置默认为production，会对打包生成的文件进行代码压缩和性能优化，打包速度很慢，仅适合项目发布阶段使用

development（开发模式）：不会对打包生成的文件进行代码压缩和性能优化，打包速度快，适用于开发阶段

复制代码 
module.exports={
    mode:'production'
}

3_使用webpack-dev-server_哔哩哔哩_bilibili

《Webpack打包简单的js文件》

初始化一个新的npm

步骤一：

初始化npm项目，创建一个package.json文件

复制代码 
npm init -y
步骤二：

添加打包脚本：在scripts部分添加一个命令来运行webpack

复制代码 
"scripts": {
    "build": "webpack --config webpack.config.js"
  },
步骤三：

安装Webpack

复制代码 
npm install --save-dev webpack webpack-cli
步骤四：

创建一个简单的Javascript文件，比如src/index.js

复制代码 
console.log('Hello,Webpack!');
步骤五：

配置Webpack，创建一个名为webpack.config.js的文件

复制代码 
const path = require('path');	// 《引入path模块》如 join()、basename()、dirname()、extname() 等，

module.exports = {
  mode: 'development',	// 设置模式为开发模式，可以设置为 'production' 以启用压缩等优化
  entry: './src/index.js',	// 设置入口文件为 './src/index.js'
  output: {		//设置输出目录为 path.resolve(__dirname, 'dist')
    path: path.resolve(__dirname, 'dist'), 	// 输出目录
    filename: 'bundle.js'	// 设置输出文件为 'bundle.js'
  }
};
步骤六：

打包项目：

复制代码 
npm run build

《Webpack打包vue项目》

步骤一：

创建一个vue项目

复制代码 
vue create 项目名称

在项目里打开终端

步骤二：

初始化npm项目，创建一个package.json文件

复制代码 
npm init -y
步骤三：

修改package.json

复制代码 
"scripts": {
    "build": "webpack --config webpack.config.js"
  },
步骤四：

npm安装Webpack

复制代码 
npm install --save-dev webpack webpack-cli
步骤五：

在项目根目录下创建一个名为webpack.config.js的文件

复制代码 
const { VueLoaderPlugin } = require('vue-loader');	// 引入 VueLoaderPlugin
const path = require('path');	// 引入路径模块

module.exports = {
  mode: 'development',	// 设置模式为开发模式，可以设置为 'production' 以+++++++++
  //启用压缩等优化
  entry: './src/main.js',	 // 设置入口文件为 './src/main.js'
  output: {
  	// 设置输出目录为 path.resolve(__dirname, //'dist')
    path: path.resolve(__dirname, 'dist'),	
    filename: 'bundle.js'	// 设置输出文件为 'bundle.js'
  },
  // 配置模块加载规则
  module: {
    rules: [
      {
      	// 匹配 .vue 文件，使用 vue-loader
        test: /\.vue$/,// 文件后缀名的匹配规则
        loader: 'vue-loader'// 定义了不同模块对应的 loader
      },
      {
      	// 匹配 .js 文件，使用 babel-loader，排除 node_modules
        test: /\.js$/,// 文件后缀名的匹配规则
        loader: 'babel-loader',// 定义了不同模块对应的 loader
        exclude: /node_modules/		// 排除
      },
      {
      	// 匹配 .png 文件，使用 file-loader
        test: /\.png$/,// 文件后缀名的匹配规则
        use: 'file-loader'//定义了不同模块对应的 loader
      },
      {
      	// 匹配 .css 文件，使用 vue-style-loader 和 css-loader
        test: /\.css$/,// 文件后缀名的匹配规则
        // 定义了不同模块对应的 loader
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  },
  // 配置插件
  plugins: [
    new VueLoaderPlugin()	// 创建 VueLoaderPlugin 实例
  ],
  // "resolve" 是 webpack 配置中的一个核心选项，用于配置模块解析的规则和设置模块解析的行为。它提供了一//系列的属性，包括 "alias"、"extensions" 等，用于指定模块的解析规则。
  resolve: {	//配置模块解析的规则和设置模块解析的行为
    alias: {	//表示别名配置的属性
      'vue$': 'vue/dist/vue.esm.js'	//为' vue别名设置解析路径为 'vue/dist/vue.esm.js'
    },
    //表示支持扩展名的属性
    extensions: ['*', '.js', '.vue', '.json']
  },
};

这个配置文件设定了入口文件、输出路径、模块解析规则以及插件使用

步骤六：

这行代码的意思是安装 Vue.js 的一个加载器库，名为 vue-loader，版本为 15.9.8。

复制代码 
npm install vue-loader@15.9.8

这行代码的意思是安装一个名为 @amap/amap-jsapi-loader 的库，并将其保存到 package.json 文件中

复制代码 
npm i @amap/amap-jsapi-loader --save
步骤七：

安装其他必要依赖，为了让Webpack能够理解vue-loader babel-loader file-loader style-loader css-loader

复制代码 
npm install --save-dev vue-loader babel-loader file-loader style-loader css-loader vue-template-compiler
步骤八：

使用Webpack打包的库默认会将模块暴露为全局变量，因此无法使用import语法引入

src------>views------>homeview.vue里的import导入的那句删掉

运行打包命令：

复制代码 
npm run build

常见的打包工具

  1. Webpack：功能强大的模块化打包工具，支持多种不同类型 的资源打包，灵活性强且社区活跃。缺点是配置较为复杂，需要学习成本较高。
  2. Vite：Vue.js 团队推出的下一代前端开发工具，具备快速启动 和热更新能力，支持 Vue.js、React、Preact、LitElement 等多种框架和库，性能优秀，但对于一些特别的需求可能不太适用。
  3. Parcel：一款零配置的打包工具 ，可以帮助开发者快速构建项目，但不如 Webpack 灵活，插件生态也相对较弱。
  4. Gulp：基于任务和管道的自动化构建工具，可以帮助操作和转换文件 ，并优化和压缩代码。但配置和编写任务的速度相对较慢。
  5. Grunt：与 Gulp 类似，也是基于任务配置的构建工具。但 Grunt 配置相对较为繁琐，速度较慢。
  6. Rollup：专门用于打包 JavaScript 库的工具 ，可以生成体积更小、加载更快的代码，但对于复杂的应用程序不够灵活。

需要学习成本较高。

  1. Vite：Vue.js 团队推出的下一代前端开发工具，具备快速启动 和热更新能力，支持 Vue.js、React、Preact、LitElement 等多种框架和库，性能优秀，但对于一些特别的需求可能不太适用 。

  2. Parcel：一款零配置的打包工具 ，可以帮助开发者快速构建项目，但不如 Webpack 灵活 ，插件生态也相对较弱。

  3. Gulp：基于任务和管道的自动化构建工具，可以帮助操作和转换文件 ，并优化和压缩代码。但配置和编写任务的速度相对较慢 。

  4. Grunt：与 Gulp 类似，也是基于任务配置的构建工具。但 Grunt 配置相对较为繁琐，速度较慢 。

  5. Rollup：专门用于打包 JavaScript 库的工具 ，可以生成体积更小、加载更快的代码，但对于复杂的应用程序不够灵活。

相关推荐
代码搬运媛8 小时前
Jest 测试框架详解与实现指南
前端
counterxing8 小时前
Agent 跑起来之后，难的是复用、观测和评测
node.js·agent·ai编程
counterxing9 小时前
我把 Codex 里的 Skills 做成了一个 MCP，还支持分享
前端·agent·ai编程
wangqiaowq9 小时前
windows下nginx的安装
linux·服务器·前端
之歆9 小时前
DAY_12JavaScript DOM 完全指南（二）：实战与性能篇
开发语言·前端·javascript·ecmascript
发现一只大呆瓜9 小时前
Vite凭什么这么快？3分钟带你彻底搞懂 Vite 热更新的幕后黑手
前端·面试·vite
Maimai1080810 小时前
React如何用 @microsoft/fetch-event-source 落地 SSE：比原生 EventSource 更灵活的实时推送方案
前端·javascript·react.js·microsoft·前端框架·reactjs·webassembly
kyriewen11 小时前
产品经理把PRD写成“天书”，我用AI半小时重写了一遍，他当场愣住
前端·ai编程·cursor
humcomm12 小时前
元框架的工作原理详解
前端·前端框架
canonical_entropy12 小时前
Attractor Before Harness: AI 大规模开发的方法论
前端·aigc·ai编程
热门推荐
01GitHub 镜像站点02Codex 接入 DeepSeek API 完整配置文档03CC-Switch & Claude 基于 Linux 服务器安装使用指南04【踩坑记录 | 第一篇】微软商店无法使用时，如何手动安装 OpenAI Codex？附`.msix`文件系统错误解决方法05几个好用的ip纯净度检测网站06裂开！ChatGPT 居然开始要手机号验证，附详细解决方法07装上就回不去了：CodeGraph 让 AI 编程效率飙升 92%，它到底做了什么？08【AI】2026 年具身智能模型和世界模型总结09codex app每次打开重连5次Reconnecting问题解决10用了半年 OpenRouter，我换到了 Ofox.ai — 两个 AI API 聚合平台的真实对比