webpack那些事

最新推荐文章于 2024-04-26 00:14:38 发布
最新推荐文章于 2024-04-26 00:14:38 发布
阅读量286 收藏
点赞数 1
分类专栏： # Vue2 experience
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44757417/article/details/109229871
版权

webpack

中文官网
英文官网

webpack 基本概念

  • 为什么要学习webpack
    • webpack 它是 vue-cli 的底层实现原理，学习了它，可以更加方便的去使用 vue-cli(现在基本不用了)
  • webpack 的作用
    • vue-cli 搭建的项目有哪些功能：
    • 可以运行为一个服务器
    • 可以进行实时更新
      • 代码修改之后，保存，页面会自动更新
    • 可以解析 css 文件
      • import 'xx.css'
    • 可以解析 .vue 文件
    • …
  • 上述的这些功能，其实都是 webpack 来实现的
  • webpack 怎么用
    • 配置文件
      • 功能集合
    • 配置项
      • 可配置的信息
    • loader
      • 打包的第三方包
    • plugin
      • 扩展功能

webpack 的使用

问题：

  • 表现 & 原因：模块化之后的代码浏览器是无法执行的

解决方案：

  • 如果希望模块化后的 js 代码可以被浏览器执行，可以使用 webpack 将模块化后的代码进行打包，再将打包好的代码交给浏览器将浏览器去执行就可以了。

作用：用来打包资源

  • 表
  • 样式
  • 脚本
  • 图片

打包流程

  • 模块化的项目，以一个 js 文件为入口，分别导入其它的文件（.js，图片， 样式…）形成了一个模块化的项目。webpack 可以将这个模块化的模块进行打包，将 js & 样式 & 图片进行打包，打包之后可以直接运行在浏览器上。

webpack的使用—步骤

  1. 初始化项目（生成package.json文件）
npm init -y
  1. 安装webpack
    注意：新版本的webpack不支持IE8
npm install --save-dev webpack@4.44.2 // 安装 webpack 
npm install --save-dev webpack-cli@3.3.12 // 安装 webpack 的 cli
  1. 配置 package.json
{
	"scripts": {
		"start": "webpack ./要打包的文件名"
	}
}
  1. 打包
npm run start

  1. 修改导入路径

    将 index.html 中导入的 js 替换为 dist 目录中的 js

  • 注意点
    • 0.0 webpack 可以打包模块化的项目
    • 1.0 一旦运行 npm run start 会将 src 目录下所有的内容打包到 dist 目录中
    • 2.0 在index.html 中不再导入 src 目录下的文件，而是导入 dist 目录下的内容
    • 3.0 src 下的文件依旧是模块化的项目， dist 下的是通过 webpack 打包之后的结构，不再是模块化的结构了（浏览器可以直接运行。）
    • 4.0 问题：
      • 下载第三方包时不成功：
    • 将下载的工具从 npm 改为 cnpm
      • 下载直接报错：
        • 不要将文件夹的名称取名为：webpack
        • 修改 src 的内容之后，需要重新打包才能起作用

webpack的使用—npm run

  • npm run start：会去当前运行的目录下找到 package.json 中的 script 下的 start 指令并且执行

webpack的使用—使用配置文件

官方文档

  • 由于将来在项目中可以修改的参数（配置项）非常多，如果分散在不同的地方，要修改就太麻烦了。为了解决这样的问题，可以使用 webpack 中的配置文件来管理这些需要修改的参数
  1. 在项目的根目录下创建一个文件名为： webpack.config.js
  2. 在配置文件中添加代码
const path = require('path');

module.exports = {
  entry: './src/main.js',
};
  1. 配置package.json 文件
{
	"scripts": {
		"start": "webpack --config webpack.config.js"
	}
}
  1. 删除 dist 目录
  2. 重新打包
npm run start

注意点：

  1. npm run start：
  • npm run 要运行 package.json 中 scripts 下面的指令
  • start：找到 package.json 中的 scripts 下面的 start 对应的指令，并且执行
  1. webpack --config webpack.config.js
    在这里插入图片描述

配置项

配置文件 - 入口

  • 设置项目的入口文件
    *在这里插入图片描述

配置文件 - 出口

  • 设置项目打包后生成的文件名
    在这里插入图片描述

配置文件 - 项目的模式

  • 项目模式的区分：

    • 开发模式（development）：

      • 概念：程序员在这个过程中进行代码的开发

      • 特点：

      • 保证代码的完整性，以方便程序进行代码的修改

    • 生产模式（production ）：

      • 概念：程序员的代码已经开发完成，项目已经发布上线了，已经投入生产使用

      • 特点：

      • 代码运行稳定，代码体积尽可能的小（删除空格换行缩进）

    • mode：（项目的模式）

  • development：开发模式
  • production：生产模式（默认值）
    在这里插入图片描述

配置文件 - 解析

  • resolve：

    • alias： 别名
      @ ：表示的是 src 目录 ,它就是用 alias 来配置的
      在这里插入图片描述

  • extensions：可省略的后缀名

    • 在导入文件时，每个文件都有自己的后缀，可通过它来配置可省略的后缀默认情况下 js 后缀可以省略（除了 js 之外其它的都不能省略）
      在这里插入图片描述

配置文件 - 源码映射

  • 打包后的项目报错信息是不准确的，可以使用源码映射来解决这个问题

开启源码映射：
在这里插入图片描述
特点：

  • 1.0 一旦项目开启源代码映射，会将原本的代码原本信息也保存一份到打包的目录下。
    • 问题：在加载资源时， main.js 太大了，有一部分没有意义，会消耗性能。
    • 解决方案：
      • 将源码生成到别的文件中： devtool: 'source-map'

注意点：

  • 项目的配置文件其实是基于 nodejs 的
  • 我们说 webpack是基于 nodejs 的

总结：

  • webpack 中的配置项其实有很多： 传送门
  • 我们只是挑选了其中用的比较多的来进行讲解，如果后续我们遇到其它的配置可以通过传送门去查看

loader

webpack 默认仅仅只能打包 js 文件，无法打包 其它文件（图片，样式，字体 …）.如果想要打包其它的文件，可以借助 webpack 中的 loader 来进行打包。

loader - 作用

作用：

  • webpack 默认只能打包 js 文件，无法打包其它文件（样式，字体，图片）。如果想要打包其它的文件，可以借助 webpack 中的 loader 来进行打包。

特点：

  • 所有的 loader 都是第三方包，可以帮助 webpack 打包其它资源
  • 不同的 loader 打包的文件是不一样的

loader - style-loader&css-loader

  • 可以用来帮助 webpack 打包 .css 文件
    传送门
  1. 安装打包 css 的 loader
npm install --save-dev style-loader css-loader
  1. 配置 Loader (webpack.config.js)
	entry: '',
	output: {},
	module: {
		rules: [
			{ 
				test: /\.css$/,
				use: [
					'style-loader', // 将样式使用到页面中
					'css-loader' // 将样式打包到 dist 目录下
				]
            }
		]
	}
}
  1. 重新打包 npm run start

注意点：

  • 1.0 大部分的 loader 在使用时步骤都是三步：
    • a. 下载 loader
    • b.配置 loader
    • c.重新打包
  • 2.0 打包样式时用到了 style-loader & css-loader：
    • css-loader：将 css 中的样式打包到了 dist 目录下的文件中了
    • style-loader：将打包后的 css 文件在运行时，添加到页面的头部中以 style 标签进行包裹
  • 3.0 style-loader 与 css-loader 的书写顺序不能改变

loader - less-loader

  • 在写项目时，一般会使用 less 语法来书写样式。less 如果需要打包要借助第三方包： less-loader

传送门

  • 使用 less
  • 在 style 中创建一个 less.less
  • 添加 less 的样式
  • 在 src/index.js 中导入这个 less

打包 less 的步骤：

  • 1.0 安装第三方包
npm install --save-dev less-loader less
  • 2.0 配置 loader (webpack.config.js 中完成的)
module.export = {
	module: {
		rules: [{
			test: /\.less$/,
			use: [
				'style-loader',
				'css-loader',
				'less-loader'
			]
		}]
	}
}

3.0 重新打包

loader - sass-loader

用来打包 sass 文件的

使用 sass 文件：

  • 创建一个 sass 文件（注意点：所有的 sass 文件为了防止跟其它文件冲突，后缀名统一写为 .scss )

  • 完成 sass 的代码

  • 在 index.js 中使用
    打包 sass 的步骤：

    • 1.0 下载第三方包
    • 2.0 配置第三方包
    • 3.0 重新打包

loader - file-loader

可以用来打包图片 & 字体

打包图片：

  • 使用图片
    • 在 html 中添加一个容器
    • 给容器设置样式：设置一个背景图片
  • 打包图片：
    • 1.0 下载第三方包
    • 2.0 配置第三方包
    • 3.0 重新打包
  • 注意点：
    • 1.0 会将图片打包到 dist 目录下
    • 2.0 将静态文件：public/index.html 拷贝到 dist 目录下
      • 导入 的js文件的路径也要做相应的修改

打包字体：

  • 使用字体(使用 bootstrap 中的字体文件)
    • 下载 bootstrap （版本号：3.3.7）
    • 导入 bootstrap 的样式
    • 使用字体图标
  • 打包字体：
    • 1.0 下载第三方包
    • 2.0 配置第三方包
    • 3.0 重新打包

loader - babel-loader

  • 将 es6 语法打包为 es5 语法
  1. 下载第三方包
npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env --save-dev
  1. 配置第三方包
module: {
  rules: [
    {
      test: /\.js$/, // 将后缀名为 js 的文件进行 es6 转 es5 的处理
      exclude: /node_modules/, // 处理的目录不包括 node_modules
      use: {
        loader: 'babel-loader', // 使用 babel-loader 来处理
        options: {
          presets: ['@babel/preset-env'] // 固定写法
        }
      }
    }
  ]
}

  • 重新打包

    • 最新的 webpack 已经放弃了 ie 浏览器（不会再将 es6 转 es5,所以如果要上述的代码起作用，应该将 webpack 的版本降级为 4.x）

loader - vue-loader

默认情况下 webpack 无法打包后缀名为 .vue 的文件、如果要打包需要借助第三方包： vue-loader

使用 .vue 文件：

  • 1.0 下载第三方包： vue
  • 2.0 创建一个 App.vue 文件
  • 3.0 完成 App.vue 文件的内容
    • template & style & script
  • 4.0 在 main.js 中
    • 导入 Vue
    • 导入 App.vue
    • 创建一个 vue 实例
    • 将 App.vue 挂载到 vue 实例中
  • 打包 .vue 的过程：
  1. 安装第三方包
npm install -D vue-loader vue-template-compiler
  1. 配置 Loader （webpack.config.js）

// 导入 Loader
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  module: {
    rules: [
      // 配置 loader
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    // 将 vue-loader 作为插件来使用
    new VueLoaderPlugin()
  ]
}
  1. 重新打包 npm run start

注意点：

  • vue-loader 的说明文档不在 webpack 中，因为 vue-loader 是属于 vue 的全家桶系列。如果要找去 vue 的官网中去找

总结：

  • loader 与配置项一样，也有很多不同的 loader， 我们只是学习了一些常用的 loader，其它的可以参考 传送门
  • webpack：
    • 配置项：可以用来配置项目的相关信息
    • loader：可以用帮助 webpack 打包额外的资源

插件

给 webpack 提供额外的功能

插件 - HtmlWebpackPlugin

修改内容之后，重新打包好 dist 目录下的内容之后，还需要将 index.html 从pulibc下拷贝到 dist 目录下，太麻烦了。

问题：我不希望每次重新打包 dist 目录之后再将 index.html 拷贝到 dist 目录下。

解决方案：可以使用 HtmlWebpackPlugin

作用：可以在 dist 目录中自动生成一个 html 文件

  • 使用步骤：
  1. 下载插件
npm install --save-dev html-webpack-plugin
  1. 配置插件（webpack.config.js 中完成的）
// 导入插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 配置插件
module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            filename: '', // 生成的静态文件名称
            template: '' // 以谁为模板生成的静态页面
        })
    ]
}
  1. 重新打包: npm run start

注意点：

  • 自动生成的 html 文件有以下特点：
    • 会自动将模板中的内容全部复制一份
    • 会自动在文件的末尾添加入口文件的引用
<script src="main.js"></script>

插件 - clean-webpack-plugin

每次重新打包项目时一定要删除 dist 目录

问题：每次都删除，太麻烦了。解决这个问题可以使用：clean-webpack-plugin

作用：用来清除 dist 目录

步骤：

  1. 下载插件
npm install clean-webpack-plugin --save-dev
  1. 配置插件
// 导入插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// 配置插件
module.exports = {
    plugins： [
 		new CleanWebpackPlugin()
    ]
}
  1. 重新打包

注意点：

  • 1.0 插件会帮助自动清除 dist 目录
  • 2.0 以后如果有能力看文档时，尽量用英文文档

插件 - webpack-dev-server

可以开启一个服务器，具有实时更新的功能

作用：可以开启一个服务器，具有实时更新的功能

  1. 下载插件
npm install --save-dev webpack-dev-server
  1. 配置插件（webpack.config.js）
module.exports = {
	devServer: {
    	contentBase: './dist'
	},
}
  1. 配置指令：(package.json)
{
	"scripts": {
		"start": "webpack --config webpack.config.js",
		"serve": "webpack-dev-server --open"
	}
}
  1. 开启服务器：npm run serve

注意点：

  • 开启服务器之后，修改完代码之后是不需要自己重新打包， 手动刷新页面的（服务器可以做到时实更新）
  • webpack-dev-server插件在使用时，默认使用的默认文件的名称为： webpack.config.js

插件 - 模块的热替换

  • 修改 css 之后，可以让页面不 刷新直接更新修改的样式
module.exports = {  
  devServer: {     
     contentBase: './dist',      
       hot: true, // 开启模块的热替换 
          }}

注意点：

  • 配置文件中的配置项发生修改之后需要重启服务才能生效

总结：

  • 插件的作用是给 webpack 提供额外的功能
  • 插件的种类不单单只有以上几种还有很多，详情请见： 传送门
  • webpack
    • 配置项：配置项目中的相关信息
    • loader：配置打包信息
    • plugin：配置额外功能

打包

说明：在项目中的 package.json 中有两个指令：

"serve": "vue-cli-service serve": 将项目的服务器启动起来

"build": "vue-cli-service build":将项目进行打包
  1. 运行指令： npm run build
  2. 得到生成的 dist 目录：
  • 这个目录就是我们需要的上线的文件
Silent Land
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Webpack入门详解
starry-sea1412的博客
05-19 613
Webpack 是一个现代化的 JavaScript 应用程序的静态模块打包工具。它是一个非常强大的工具，可以将多个模块打包成一个或多个 bundle，从而提高应用程序的性能和加载速度。
webpack零基础入门
jieyucx的博客
06-06 450
Webpack是一个现代的 JavaScript 应用程序静态模块打包器它是一个开源的前端工具，可以将各种资源文件（JS、CSS、图片、字体等）打包成一个或多个包，并且能够通过配置选项来实现各种构建需求。当你的应用程序逐渐变大，代码量变得越来越多，你就需要使用模块来组织代码。然而，模块化使用的代码需要打包成一个或多个文件以便浏览器可以使用。这是 Webpack 出现的初衷，它的主要作用是将各种模块打包成浏览器可以识别的代码。Webpack 还提供了各种插件和加载器，让你可以根据需要灵活配置打包过程。
4.0 webpack 打包其它资源（eg：字体）
weixin_44472131的博客
03-29 191
虽然作为一个前端已经耕耘此行业有三五个年头，但都是在业务中未曾精进，怀着初心，重识Webpack，砥砺前行💪#
Webpack5 CleanWebpackPlugin
有趣的小良的博客
07-12 1861
clean-webpack-plugin是webpack的一个小插件，由于每次打包的时候有可能文件名称和文件内容不一样，打包后的文件就叠加到输出目录下了。所以cleanWebPackPlugin作用就是在每次打包之前，先把输出目录删掉，创建最新的目录，避免一些不必要的文件还留在同一个目录下~
webpack详解
热门推荐
qq_43743402的博客
03-24 6万+
一、什么是webpack 1、官方解释：从本质上来讲，webpack是一个现在的javaScript应用的静态模块化打包工具。（从两点概括这句话即模块和打包） 下面来说一下模块和打包的概念！ 2、前端模块化： 前端模块化的一些方案：AMD、CMD、CommonJS、ES6（浏览器不能识别它们，但是webpack可以做它们的底层支撑，方可进行模块化开发） ES6之前，要想进行模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发 并且在通过模块化开发完成了项目后，还需要处理模块化间的各种依赖，并且将
Vue课程15-了解loader的调用过程
geyaoisnice的博客
05-29 225
const path=require('path') // 1. 导入 html-webpack-plugin 这个插件，得到插件的构造函数 const HtmlPlugin = require('html-webpack-plugin') // 2. new 构造函数，创建插件的实例对象 const htmlPlugin = new HtmlPlugin({ // 指定要复制哪个页面 template: './src/index.html', // 指定复制出来的文件名和存放路径 fi.
vue init webpack 依赖的webpack包
09-05
解决vue-cli · Failed to download repo vuejs-templates/webpack: connect ETIMEDOUT 20.205.243.166:443问题，方便在https://github.com/vuejs-templates/webpack 不通的时候下载。 使用方法： 1、将webpack放到C...
Webpack笔记.md
04-13
webpack的搭建和项目的整体的构架
webpack打包
06-06
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块...
WebPack基础知识详解
08-31
Webpack 是一款强大的前端构建工具，它主要负责处理和打包 JavaScript 模块，以及各种浏览器无法直接运行的扩展语言，如 SCSS、TypeScript 等。Webpack 的核心概念是模块化，它将项目视为一个整体，通过入口文件（如...
webpack安装包
11-24
webpack安装包
webpack视频学习
08-28
webpack视频教程，尚硅谷webpack教程。资深讲师讲解。
(掌握)webpack插件-Clean插件
最新发布
小余的前端博客
04-26 284
【代码】(掌握)webpack插件-Clean插件。
webpack--》webpack底层深入讲解，从初识到精通，真正实现从0到1的过程
ztK63LrD的博客
10-23 3830
根据上文webpack是有默认打包的入口与出口路径文件的，如果想修改的话，看如下操作：在 webpack.config.js 配置文件中，通过 entry 节点指定打包的入口。// 导入路径模块// 使用 node.js 语法向外导出一个 webpack 的配置对象// 代表webpack运行模式,可选值:开发模式(development)和生产模式(production)// entry:'指定要处理的文件路径'// output:指定生成的文件要存放到哪里output:{// 存放目录。
demo17 clean-webpack-plugin (清除模式)
weixin_34268169的博客
05-25 352
1.为什么需要自动清除 dist 文件夹 在之前的 demo 中，webpack 打包后会在根目录下自动创建 dist 目录，并且把生成的文件输出到 dist 下。 当配置的输出包名含有 [hash] 时，hash值会随着文件内容的改变而改变。 因此，我们需要在下一次 webpack 打包输出之前，把 dist 目录清空。 clean-webpack-plugin 插件就能帮你做到。 2.clea...
webPack原理
qq_46222031的博客
07-09 2229
loader分为顺序为从下到上loader本质是一个函数，把要处理的文件作为参数，进行处理之后再返回一个文件最简单的loader loader的定义方式 同步loader this.callback是指调用下一个loader类似链表 调用callback执行下一个loader，此时是异步操作。默认情况下，资源文件会被转化为 UTF-8 字符串，然后传给 loader。通过设置 raw 为 true，loader 可以接收原始的 Buffer Pitching Loader
对webpack的理解
qq_40409143的博客
03-27 256
记录自己对webpack的理解 webpack的配置详解 const path = require('path'); module.exports = { entry: "./app/entry", // string | object | array // Webpack打包的入口 output: { // 定义webpack如何输出的选项 path: path.resolve(__dirname, "dist"), // string // 所有输出文件的目标路径
webpack理解
Vera_Gao的博客
05-24 609
webpack 核心概念 Entry 入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。 进入入口起点后,webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。 每个依赖项随即被处理,最后输出到称之为 bundles 的文件中。 Output output 属性告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,默认值为 ./dist。 基本上,整个应用程序结构,都会被编译到你指定的输出路径的文件
webpack的个人理解（一）
weixin_33843947的博客
03-29 1034
一、构建工具的介绍关于构建工具，我用过的也就webpack,gulp稍微有些了解，但是没在项目中真正用到。以我的理解，构建工具能实现的功能：1. 代码转换： 从typescript->JavaScript，sass->css等；2. 代码优化： 压缩HTML、css代码等；3. 代码分割： 将通用的代码从多个文件中抽取出来；大文件切割成小文件；4. 模块合并： 模块化项目里会有很多模...
webpack 的plugin 有那些
04-03
常用的 webpack plugin 包括： 1. HtmlWebpackPlugin：生成 HTML 文件，可自动引入打包后的 js 文件。 2. MiniCssExtractPlugin：将 CSS 抽离成单独文件，提高页面渲染速度。 3. CleanWebpackPlugin：清空打包目录...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值