webpack基本功能学习总结

最新推荐文章于 2024-03-14 20:18:11 发布

dclingcloud

最新推荐文章于 2024-03-14 20:18:11 发布

阅读量700

点赞数

本文链接：https://blog.csdn.net/dclingcloud/article/details/87203289

版权

版权声明：本文为神州灵云作者的原创文章，未经神州灵云允许不得转载。

本文作者：Spike

前言

笔者开发的项目，是通过脚手架工具搭建的，默认就配置了Webpack，而且配置文件还分成很多个文件。打开文件一看，里面有很多配置，如entry，loader，plugins…粗一看有些云里雾里，阅读了官网文档以及一些文章后，对一些基本概念了解了些，在此对webpack的学习做一下总结。

什么是Webpack

Webpack是一个打包器，它能够把我们写的代码，经过一些处理，如压缩，转译(babel)等，打包成我们用于最终发布的代码。

Webpack有什么作用

模块化

Webpack默认支持js文件的模块化，除此之外，借助loader也能对其他资源如css，font，icon等资源进行模块化处理。
(模块化，允许我们把各种资源分成若干文件，在文件中把资源导出，用到的地方把资源导入。这样便于我们去组织代码结构。)

压缩

Webpack可以把源码进行压缩，去除一些无用代码，使得打包后的代码体积更小便于发布,浏览器加载起来也会更快。

代码转译

Webpack通过借助一些loader，如babel-laoder,可以对源码进行转译。使得我们可以用较新的语法，如ES6,ES7等去编写代码，而不需要担心浏览器是否支持，它能帮我们转译成浏览器支持的语法。

提供许多便捷的功能

Webpack还提一些对开发者很有用的功能，如模块热替换(HMR)，可以让我们改动代码后，立即再页面看到修改后的变化，且不需要刷新页面。

基本概念介绍

基本安装

前提: 确保安装了Node.js的最新版本
创建一个目录

mkdir webpack-demo cd webpack-demo

初始化npm

npm init -y

安装webpack和webpack-cli(用于再命令行中运行webpack)

npm install --save-dev webpack webpack-cli

安装完成后，目录结构应该是这样的:

  webpack-demo
  |- node_modules
  |- package.json
  |- package-lock.json

基本功能

首先，考虑一下在不用webpack时的写法。假设需要用到lodash这个库。

我们先添加两个文件index.html和index.js:

project

  webpack-demo
  |- node_modules
  |- package.json
  |- package-lock.json
+ |- index.html
+ |- index.js

index.html

<!doctype html> <html> <head> <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script> </head> <body> <div id="div"></div> <script src="./index.js"></script> </head> </body> </html>

index.js

const divElement = document.getElementById('div'); // 引用lodash库拼接字符串，lodash通过页面的script标签引入 divElement.innerHTML = _.join(['hello', 'world'], ' ');

可以看到，在这个例子中index.js中依赖了lodash库(’_’)，而lodash库是在index.html文件中通过script标签引入的。这种依赖关系有几个问题:

这种依赖关系是隐性的,光是看index.js这个文件，我们并不知道是否引入了外部的库。
如果script标签里引入的库缺失了, 就会导致依赖这个库的代码无法运行(例如引用的cdn挂了)。
如果script标签中引入的库没有被依赖，但是它还是会被浏览器下载下来，减慢了页面的加载速度。

而通过Webpack模块化代码，我们就可以规避以上的问题。

为此，我们需要对项目结构以及文件内容做些调整。

project

  webpack-demo
  |- node_modules
  |- package.json
  |- package-lock.json
- |- index.html
- |- index.js
+ |- /dist
+   |- index.html
+ |- /src
+   |- index.js

创建一个dist目录，把index.html移到这个目录下
创建一个src目录，把index.js移动到这个目录下

为什么要这么做呢，因为在没有任何Webpack配置的情况下，Webpack打包的默认入口(entry)是/src/index.js. 而默认输出(output)则是/dist/main.js

接着，为了以模块化的方式引入lodash，我们需要在项目中安装lodash这个库.

npm install --save lodash

安装成功后，package.json这个文件中，应该会增加一个lodash的依赖。

package.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1"
  },
+  "dependencies": {
+    "lodash": "^4.17.11"
+  }
}

安装好lodash后，我们调整一下src/index.js,显式地引入lodash模块:

src/index.js

+ import _ from 'lodash';

const divElement = document.getElementById('div');
- // 引用lodash库拼接字符串，lodash通过页面的script标签引入
+ // 现在我们通过从本地的库中，把lodash引入进来。
+ // 这样，lodash的依赖就是显式的，我们能清楚地知道，index.js需要依赖lodash
divElement.innerHTML = _.join(['hello', 'world'], '  ');

调整一下dist/index.html, 去掉script标签引入的lodash,引用webpack打包后的文件，即main.js:

dist/index.html

<!doctype html>
<html>
  <head>
-    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
  </head>
  <body>
    <div id="div"></div>
-    <script src="./index.js"></script>
+    <script src="./main.js"></script>
  </head>
  </body>
</html>

文件都调整好之后，我们就需要用Webpack进行打包，Webpack会从入口文件开始(src/index.js)找到所有的依赖，如lodash,然后把他们打包到一个或多个文件中，本例中，就是打包到dist/main.js.

npx webpack

npx 指令，可以执行我们指定的库的脚本。npx webpack 就是去执行webpack的脚本，你可以在node_modules/.bin/ 目录下找到webpack的脚本。感兴趣的话，可以看看npx文档

$ npx webpack npx: installed 1 in 7.471s Path must be a string. Received undefined E:\github\webpack-demo\node_modules\webpack\bin\webpack.js Hash: 61f045951826de0b0c9e Version: webpack 4.29.0

最低0.47元/天解锁文章

dclingcloud

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
webpack基本功能学习总结

版权声明：本文为神州灵云作者的原创文章，未经神州灵云允许不得转载。本文作者：Spike前言笔者开发的项目，是通过脚手架工具搭建的，默认就配置了Webpack，而且配置文件还分成很多个文件。打开文件一看，里面有很多配置，如entry，loader，plugins…粗一看有些云里雾里，阅读了官网文档以及一些文章后，对一些基本概念了解了些，在此对webpack的学习做一下总结。什么是Webp...
复制链接

扫一扫