我的编程空间,编程开发者的网络收藏夹
学习永远不晚

怎么掌握webpack

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

怎么掌握webpack

本篇内容介绍了“怎么掌握webpack”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

什么是webpack?

一句话概括:webpack是一个模块打包工具(module bundler)。重点在于两个关键词“模块”和“打包”。什么是模块呢?我们回顾一下曾经的前端开发方式,js文件通过script标签静态引入,js文件之间由于没有强依赖关系,如果文件1要用到文件2的某些方法或变量,则必须将文件1放到文件2后面加载。随着项目的增大,js文件之间的依赖关系越发错综复杂,维护难度也越来越高。这样的困境驱使着前端工程师们不断探索新的开发模式,从后端、app的开发模式中我们获得灵感,为什么不能引入“模块”的概念让js文件之间可以相互引用呢?模块1要使用模块2的功能,只需要在该模块1中明确引用模块2就行了,而不用担心它们的排列顺序。基于这种理念,CommonJS和 AMD规范被创造了出来,然后有了require.js、system.js这样的前端模块加载工具和node的模块系统,直到现在流行的es6 module。

模块的引入解决了文件之间依赖引用的问题,而打包则解决了文件过多的问题。当项目规模增大,模块的数量数以千计,浏览器如果要加载如此多的文件,页面加载的速度势必会受影响,而bundler可以把多个关联的文件打包到一起从而大量减少文件的数量提高网页加载性能。提供模块化的开发方式和编译打包功能就是webpack的核心,其他很多功能都围绕它们展开。

核心概念

Module(模块)

对于webpack,模块不仅仅是javascript模块,它包括了任何类型的源文件,不管是图片、字体、json文件都是一个个模块。Webpack支持以下的方式引用模块:

  •  ES2015 import 方法

  •  CommonJs require() 方法

  •  AMD define 和 require 语法

  •  css/sass/less文件中的 @import 语法

  •  url(...) 和 <img class="lazy" data-src=...> 中的图片路径

Dependency Graph(依赖关系图)

所谓的依赖关系图是webpack根据每个模块之间的依赖关系递归生成的一张内部逻辑图,有了这张依赖关系图,webpack就能按图索骥把所有需要模块打包成一个bundle文件了。

Entry(入口)

绘制依赖关系图的起始文件被称为entry。默认的entry为 ./class="lazy" data-src/index.js,或者我们可以在配置文件中配置。entry可以为一个也可以为多个。

单个entry:

module.exports = {    entry: './class="lazy" data-src/index.js'  }

或者

module.exports = {    entry: {      main: './class="lazy" data-src/index.js'    }  };

多个entry,一个chunk

我们也可以指定多个独立的文件为entry,但将它们打包到一个chunk中,此种方法被称为 multi-main entry,我们需要传入文件路径的数组:

module.exports = {    entry: ['./class="lazy" data-src/index.js', './class="lazy" data-src/index2.js', './class="lazy" data-src/index3.js']  }

但是改种方法的灵活性和扩展性有限,因此并不推荐使用。

多个entry,多个chunk

如果有多个entry,并且每个entry生成对应的chunk,我们需要传入object:

module.exports = {    entry: {      app: './class="lazy" data-src/app.js',      admin: './class="lazy" data-src/admin.js'    }  };

这种写法有***的灵活性和扩展性,支持和其他的局部配置(partial configuration)进行合并。比如将开发环境和生产的配置分离,并抽离出公共的配置,在不同的环境下运行时再将环境配置和公共配置进行合并。

Output(出口)

有了入口,对应的就有出口。顾名思义,出口就是webpack打包完成的输出,output定义了输出的路径和文件名称。Webpack的默认的输出路径为 ./dist/main.js。同样,我们可以在配置文件中配置output:

module.exports = {    entry: './class="lazy" data-src/index.js',    output: {      path: __dirname + '/dist',      filename: 'bundle.js'    }  };

多个entry的情况

当有多个entry的时候,一个entry应该对应一个output,此时输出的文件名需要使用替换符(substitutions)声明以确保文件名的唯一性,例如使用入口模块的名称:

module.exports = {    entry: {      app: './class="lazy" data-src/app.js',      search: './class="lazy" data-src/search.js'    },    output: {      filename: '[name].js',      path: __dirname + '/dist'    }  }

最终在 ./dist 路径下面会生成 app.js和search.js两个bundle文件。

Loader(加载器)

Webpack自身只支持加载js和json模块,而webpack的理念是让所有的文件都能被引用和加载并生成依赖关系图,所以loader出场了。Loader能让webpack能够去处理其他类型的文件(比如图片、字体文件、xml)。我们可以在配置文件中这样定义一个loader:

webpack.config.js

module.exports = {    module: {      rules: [        {           test: /\.txt$/,           use: 'raw-loader'         }      ]    }  };

其中test定义了需要被转化的文件或者文件类型,use定义了对该文件进行转化的loader的类型。该条配置相当于告诉webpack当遇到一个txt文件的引用时(使用require或者import进行引用),先用raw-loader转换一下该文件再把它打包进bundle。

还有其他各种类型的loader,比如加载css文件的css-loader,加载图片和字体文件的file-loader,加载html文件的html-loader,将***JS语法转换成ES5的babel-loader等等。完整列表请参考 webpack loaders。

Plugin(插件)

Plugin和loader是两个比较混淆和模糊的概念。Loader是用来转换和加载特定类型的文件,所以loader的执行层面是单个的源文件。而plugin可以实现的功能更强大,plugin可以监听webpack处理过程中的关键事件,深度集成进webpack的编译器,可以说plugin的执行层面是整个构建过程。Plugin系统是构成webpack的主干,webpack自身也基于plugin系统搭建,webpack有丰富的内置插件和外部插件,并且允许用户自定义插件。官方列出的插件有 这些。

与loader不同,使用plugin我们必须先引用该插件,例如:

const webpack = require('webpack'); // 用于引用webpack内置插件  const HtmlWebpackPlugin = require('html-webpack-plugin'); // 外部插件  module.exports = {    plugins: [      new webpack.HotModuleReplacementPlugin(),      new HtmlWebpackPlugin({template: './class="lazy" data-src/index.html'})    ]  };

实践

了解webpack的基本概念之后,我们通过实践来加深理解。接下来,我们使用webpack搭建一个简易的react脚手架。

创建项目

首先创建react-webpack-starter项目并使用 npm init 初始化。

安装依赖

安装react

npm i react react-dom

安装webpack相关

npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin style-loader css-loader

安装webpack-cli后可以在命令行中执行webpack命令;webpack-dev-server提供了简易的web服务器,并且在修改文件之后自动执行webpack的编译操作并自动刷新浏览器,省去了重复的手动操作;html-webpack-plugin用于自动生成index.html文件,并且在index.html中自动添加对bundle文件的引用;style-loader和css-loader用于加载css文件。

安装babel相关

由于react中使用了class, import这样的es6的语法,为了提高网站的浏览器兼容性,我们需要用babel转换一下。

npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader

其中@babel/core是babel的核心模块,包含了babel的核心功能;@babel/preset-env支持转换ES6以及更新的js语法,并且可根据需要兼容的浏览器类型选择加载的plugin从而精简生成的代码;@babel/preset-react包含了babel转换react所需要的plugin;babel-loader是webpack的babel加载器。

配置webpack

在项目根目录下面新建webpack.config.js,内容如下:

webpack.config.js

const path = require('path');  const HtmlWebpackPlugin = require('html-webpack-plugin');  module.exports = {    entry: './class="lazy" data-src/index.js',    output: {      path: path.resolve(__dirname, 'dist'),      filename: 'bundle.js'    },    module: {      rules: [        {          test: /\.js$/,          exclude: /node_module/,          use: 'babel-loader'        },        {          test: /\.css$/,          use: ['style-loader', 'css-loader'] // 注意排列顺序,执行顺序与排列顺序相反        }      ]    },    plugins: [      new HtmlWebpackPlugin({        template: './class="lazy" data-src/index.html'      })    ]  }

其中HtmlWebpackPlugin使用自定义的模版来生成html 文件,模版的内容如下:

./class="lazy" data-src/index.html

<!DOCTYPE html>  <html lang="en">  <head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <meta http-equiv="X-UA-Compatible" content="ie=edge">    <title>My React App</title>  </head>  <body>    <div id="app"></div>  </body>  </html>

配置babel

在项目根目录下面新建.babelrc文件,配置我们安装的两个babel preset:

.babelrc

{    "presets": [      "@babel/preset-env",      "@babel/preset-react"    ]  }

生成react应用根节点

./class="lazy" data-src/index

import React from 'react';  import ReactDOM from 'react-dom';  import App from './components/App';  ReactDOM.render(<App />, document.getElementById('app'));

./class="lazy" data-src/component/App.js

import React, { Component } from 'react';  import './App.css';  export default class App extends Component {    render() {      return (        <div>          my react webpack starter        </div>      )    }  }

./class="lazy" data-src/components/App.css

body{    font-size: 60px;    font-weight: bolder;    color: red;    text-transform: uppercase;  }

配置 package.json

***,在package.json文件里面加上两个scripts,用来运行开发服务器和打包:

package.json

"scripts": {    "start": "webpack-dev-server --mode development --open --hot",    "build": "webpack --mode production"  }

注意,我们启用了webpack-dev-server的模块热更新功能(HMR),进一步提高我们的开发效率。

到此一个最简版本的react脚手架就搭建完成了,我们运行一下看看效果:

怎么掌握webpack

“怎么掌握webpack”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

怎么掌握webpack

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

JavaScript Webpack:入门指南,带你轻松掌握Webpack的奥秘

Webpack 是一款用于构建 JavaScript 模块的强大工具,可以帮助开发者轻松管理和构建前端项目。
JavaScript Webpack:入门指南,带你轻松掌握Webpack的奥秘
2024-02-08

怎么掌握TypeScript

这篇文章主要介绍“怎么掌握TypeScript”,在日常操作中,相信很多人在怎么掌握TypeScript问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么掌握TypeScript”的疑惑有所帮助!接下来,请跟
2023-06-27
2024-04-02

怎么掌握Python

本篇内容介绍了“怎么掌握Python”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!Python 基础1.变量你可以把变量想象成一个用来存储值
2023-06-17

怎么掌握Java LinkedBlockingQueue

这篇文章主要讲解了“怎么掌握Java LinkedBlockingQueue”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么掌握Java LinkedBlockingQueue”吧!队列在
2023-07-05

前端工程化&掌握Webpack极速配置技巧

前端工程化是指遵循一定的标准和规范,通过工具去提高开发效率,降低成本的一种手段。
前端开发2024-12-01

怎么掌握ADO.NET技术

本篇内容主要讲解“怎么掌握ADO.NET技术”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么掌握ADO.NET技术”吧!在使用.NET的过程中,数据库访问是一个很重要的部分,特别是在B/S系统
2023-06-17

怎么掌握Python列表

本篇内容主要讲解“怎么掌握Python列表”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么掌握Python列表”吧!1. 基本语法最基本的列表理解有以下语法。如前所述,做某些事用它会很方便,比
2023-06-16

Linux initrd系统怎么掌握

本篇内容主要讲解“Linux initrd系统怎么掌握”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Linux initrd系统怎么掌握”吧!定义主目录(root)的路径mkrootdev指令是
2023-06-16

怎么掌握python字符串

本篇内容主要讲解“怎么掌握python字符串”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么掌握python字符串”吧!四大前缀除了普通的字符串,python在字符串前面可以有4个前缀,即fr
2023-06-25

Java抽象类怎么掌握

本文小编为大家详细介绍“Java抽象类怎么掌握”,内容详细,步骤清晰,细节处理妥当,希望这篇“Java抽象类怎么掌握”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。抽象类1.引出抽象类向上转型带来的最大的好处就是参
2023-07-02

编程热搜

目录