对与webpack的理解

最新推荐文章于 2024-07-28 00:56:04 发布
最新推荐文章于 2024-07-28 00:56:04 发布
阅读量221 收藏
点赞数
文章标签： 1024程序员节
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Ain_z/article/details/109261860
版权

webpack

webpack基本概念

  1. webpack的作用

    • vue-cli实现底层的原理
      • 可以运行为一个服务器
      • 可以进行实时更新
      • 代码修改后，保存，页面会自动更新
      • 可以解析 css文件 .vue 文件

  2. 准备工作

    任务：使用webpack搭建一个类似与vue-vli搭建的项目结构

  3. 概念

    文档传送

    作用：用来打包资源

    • 表
    • 样式
    • 脚本
    • 图片

    打包流程：

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

webpack使用

  • 1.初始化项目(生成 package.json文件)

    • npm  init -y

  • 2.安装webpack

    npm install --save-dev webpack@4.44.2 // 安装 webpack 
npm install --save-dev webpack-cli@3.3.12 // 安装 webpack 的 cli

  • 3.配置 package.json

    {
	"scripts": {
		"start": "webpack ./要打包的文件名"
	}
}

  • 4.打包

    npm run start

  • 5.修改导入路径

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

注意点：

  1. 下载第三方包时不成功：

    ​ 将下载的工具npm改为cnpm

  2. 下载直接报错：

    ​ 不要将文件夹的名称取名为： webpack

npm-run的使用

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

配置文件

步骤：

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

  • 2.0 在配置文件中添加代码

    const path = require('path');

module.exports = {
  entry: './src/main.js',
};

  • 3.0 配置 package.json文件

    {
	"scripts": {
		"start": "webpack --config webpack.config.js"
	}
}

  • 4.0 删除 dist目录

  • 5.0 重新打包

配置项

配置项-入口

loader

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

特点：

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

传送门

步骤：

  • 1.0安装打包css的loader

    npm install --save-dev style-loader css-loader

  • 2.0配置Loader(webpack.sonfig.js)

    module.exports = {
	entry: '',
	output: {},
	module: {
		rules: [
			{ 
				test: /\.css$/,
				use: [
					'style-loader', // 将样式使用到页面中
					'css-loader' // 将样式打包到 dist 目录下
				]
            }
		]
	}
}

  • 3.0重新打包 npm run start

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 语法

打包 es6 为 es5

  • 1.0 下载第三方包

    npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env --save-dev

  • 2.0 配置第三方包

    module: {
  rules: [
    {
      test: /\.js$/, // 将后缀名为 js 的文件进行 es6 转 es5 的处理
      exclude: /node_modules/, // 处理的目录不包括 node_modules
      use: {
        loader: 'babel-loader', // 使用 babel-loader 来处理
        options: {
          presets: ['@babel/preset-env'] // 固定写法
        }
      }
    }
  ]
}

  • 3.0 重新打包

注意点：

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

插件

插件 - HtmlWebpackPlugin

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

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

使用步骤：

  • 1.0 下载插件

    npm install --save-dev html-webpack-plugin

  • 2.0 配置插件（webpack.config.js 中完成的）

    // 导入插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 配置插件
module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            filename: '', // 生成的静态文件名称
            template: '' // 以谁为模板生成的静态页面
        })
    ]
}

  • 3.0 重新打包: npm run start

    注意点：

    • 自动生成的 html 文件有以下特点：

      • 会自动将模板中的内容全部复制一份

      • 会自动在文件的末尾添加入口文件的引用

        <script src="main.js"></script>
插件 - clean-webpack-plugin

作用：用来清除 dist 目录

步骤：

  • 1.0 下载插件

    npm install clean-webpack-plugin --save-dev

  • 2.0 配置插件

    // 导入插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// 配置插件
module.exports = {
    plugins： [
 		new CleanWebpackPlugin()
    ]
}

  • 3.0 重新打包

插件 - webpack-dev-server

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

步骤：

  • 1.0 下载插件

    npm install --save-dev webpack-dev-server

  • 2.0 配置插件（webpack.config.js）

    module.exports = {
	devServer: {
    	contentBase: './dist'
	},
}

  • 3.0 配置指令：(package.json)

    {
	"scripts": {
		"start": "webpack --config webpack.config.js",
		"serve": "webpack-dev-server --open"
	}
}

  • 4.0 开启服务器：npm run serve

注意点：

  • 开启服务器之后，修改完代码之后是不需要自己重新打包， 手动刷新页面的（服务器可以做到时实更新）
  • webpack-dev-server插件在使用时，默认使用的默认文件的名称为： webpack.config.js
红色制作
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
webpack优化的深入理解
12-09
然而，这些工具在为我们省去繁琐配置的同时，也使得开发者对 webpack 优化的理解相对匮乏。尽管脚手架已经做了很多优化工作，但当我们需要进行特定的性能提升时，对 webpack 的了解变得至关重要。本文将深入探讨 ...
一看就会的保姆级webpack配置介绍
weixin_48357279的博客
05-02 1849
webpack基本介绍 webpack官网 webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler) 现代 javascript 应用程序的 静态模块打包器 (module bundler) 静态: 文件资源 模块: node环境, 引入文件, 遵守模块化语法 除了合并代码, 还可以翻译和压缩代码 less/sass -> css ES6/7/8 -> ES5 html/css/js -> 压缩...
webpack学习
weixin_41184962的博客
12-02 1761
目录1. 简介1. Entry 入口2. Output 3. Loader4. Plugins5. Model2. webpack 体验1. 开发环境控制台 输入 指令： 2. 生产环境控制台 输入 指令： 3.node 运行这个文件，输出 3结论：3. webpack 打包样式资源4. 打包 html资源5. 打包图片资源6. 打包其他资源webpack5:webpack4: 需要加上 url-loader7. devserve 热更新8. 提取 css 成单独文件9. css兼容性处理10. css
webpack的学习
qq_461491877的博客
02-04 6842
webpack的学习 尚硅谷2020最新版Webpack5实战教程(从入门到精通)，哔哩哔哩链接：https://www.bilibili.com/video/BV1e7411j7T5?p=1 环境参数： Nodejs 10版本以上、webpack 4.26版本以上 预备技能： 基本Nodejs知识和Npm指令、熟悉ES6语法 一、webpack基本使用 1.webpack简介 ​ webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。 在 webpack 看来,
Webpack入门详解
starry-sea1412的弃坑之路
05-19 648
Webpack 是一个现代化的 JavaScript 应用程序的静态模块打包工具。它是一个非常强大的工具，可以将多个模块打包成一个或多个 bundle，从而提高应用程序的性能和加载速度。
Webpack--入门只看这一篇就够了(图文＋代码）
最新发布
weixin_46714216的博客
07-28 1565
代码分离（code splitting）和懒加载（lazy loading）是Webpack中用于优化资源加载的两种技术。代码分离是将打包生成的代码文件拆分成多个较小的文件，而不是将所有代码打包到一个文件中。这样做的好处是可以提高初始加载速度，并减小每个页面的加载所需的数据量。通过代码分离，只需在需要时加载特定模块，提高了页面的响应速度和用户体验。懒加载是指在需要时才加载某个模块，而不是在初始加载时就将所有代码一次性加载完毕。通过懒加载，可以将页面分成多个模块，并根据需要动态地加载模块。
利用webpack理解CommonJS和ES Modules的差异区别
10-15
在webpack 5中，对ES Modules的支持更加完善，打包结果更优化。 在准备阶段，我们需要创建一个简单的项目，安装webpack 5及其命令行工具，并设置好目录结构。在没有配置文件的情况下，webpack会默认以`src/index.js...
webpack_notes:对webpack的使用
05-15
Webpack 是一个现代JavaScript应用程序的模块打包工具，它能够将各种资源如JavaScript、CSS、图片等视为模块，并将...`webpack_notes`中应包含这些内容的详细讲解和实践示例，以帮助开发者更好地理解和运用Webpack 4。
webpack最详细学习
m0_56398485的博客
12-04 427
webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具，将各种类型资源打包编译为最基础的html、js、css、img等 创建npm项目 安装webpack以及脚手架 3、helloword 原始目录 index.html src/index.js1.src/index.js 引入外部模块 utils/createButton.js
webpack超详细教程，学webpack看这一篇就够了！（上）
共同学习，共同成长
05-02 5076
​本文将以基础到进阶的形式详细讲解webpack，包括【webpack基本概念和作用】【使用步骤】【打包、编译和压缩等相关配置】【使用webpack开发服务器】等等，由浅入深，通俗易懂，需要的小伙伴点个关注收藏一下吧！
Webpack详解
李宥的博客
07-05 6654
- 静态模块打包工具 - 官网：[https://webpack.docschina.org/](https://webpack.docschina.org/) - 官网文档：https://webpack.docschina.org/concepts/
webpack详细教程
zxcvb0825的博客
12-13 1011
webpack | webpack中文文档 | webpack中文网Webpack 不仅是一个模块打包器(bundler)，更完整的讲是一个前端自动化构建工具。在 Webpack 看来前端的所有资源文件(s/json/css/img/less/...)都会作为横块处理它将根据模块的依赖关系进行静态分析，生成对应的静态资源.
webpack 从入门到精通
weixin_46019752的博客
02-15 100
第 1 章：webpack 简介 1.1 webpack 是什么 webpack是一种前端资源构建工具，一个静态模块打包器（module bundler）。 在webpack看来，前端的所有资源文件（js/json/css/img/less/...）都会作为模块处理。 它会根据模块的依赖关系进行静态分析，打包生成对应的静态资源（bundle）。 1.2 webpack 五个核心概念 1.2.1 Entry 入口(Entry)指示 webpack 以哪个文件为入口起点开始打包，分析构建内.
webpack零基础入门
jieyucx的博客
06-06 478
Webpack是一个现代的 JavaScript 应用程序静态模块打包器它是一个开源的前端工具，可以将各种资源文件（JS、CSS、图片、字体等）打包成一个或多个包，并且能够通过配置选项来实现各种构建需求。当你的应用程序逐渐变大，代码量变得越来越多，你就需要使用模块来组织代码。然而，模块化使用的代码需要打包成一个或多个文件以便浏览器可以使用。这是 Webpack 出现的初衷，它的主要作用是将各种模块打包成浏览器可以识别的代码。Webpack 还提供了各种插件和加载器，让你可以根据需要灵活配置打包过程。
史上最全webpack带你深入了解webpack
m0_62371650的博客
09-14 2229
史上最全webpack带你深入了解webpack
webpack看这一篇就够了
热门推荐
一个前端开发者
06-20 5万+
能够理解webpack基本概念和作用能够掌握webpack使用步骤能够使用webpack相关配置能够使用webpack开发服务器能够查阅使用webpack中文文档webpack官网现代 javascript 应用程序的 静态模块打包器 (module bundler)为要学的 vue-cli 开发环境做铺垫把很多文件打包整合到一起, 缩小项目体积, 提高加载速度其中功能:less/sass -> cssES6/7/8 -> ES5 处理js兼容支持js模块化处理css兼容性html/css/js -> 压缩
webpack快速入门---webpack的安装和基本使用
I_am_shy的博客
05-29 1902
/ 引用nodejs的path模块mode: 'development',//开发环境entry : path.join(__dirname,'src','index.js'),// 打包入口output:{path:path.join(__dirname,'dist'),// 打包结束的位置filename :'bundle.js' // 指定的打包后文件名称},module:{//配置模板rules:[//规则设置test: /\.js$/,//只对js文件生效。
对webpack的理解
05-25
Webpack 是一个现代化的 JavaScript 应用程序的静态模块打包工具，它可以将各种类型的文件（包括 JavaScript、CSS、图片、字体等）视为模块，通过加载器（loader）和插件（plugin）对这些模块进行处理，最终生成可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值