Webpack学习笔记

最新推荐文章于 2024-05-08 10:07:24 发布

Peter Pan 1231

最新推荐文章于 2024-05-08 10:07:24 发布

阅读量201

点赞数

分类专栏：前端学习文章标签：前端打包 webpack

本文链接：https://blog.csdn.net/panjianlongWUHAN/article/details/98482766

版权

前端学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

什么是webpack？

webpack是一个现代JavaScript应用程序的静态模块打包器，在webpack里一切文件皆模块，通过loader转换文件，通过plugin注入钩子，最后输出由多个文件组合成的文件，webpack专注构建模块化项目。
webpack可以看做是模块打包机：他做的事情是，分析项目，找到JavaScript模块以及其他的一些浏览器不能直接运行的拓展语言（scss， TypeScript等），并将其打包为合适的格式以供浏览器使用。

WebPack常见概念

WebPack优点

模块化开发，能做到开箱即用，一步到位。
使用TypeScript
Scss，less，sass等css预处理器
可通过plugin扩展，完整好用又不失灵活

WebPack四个核心概念

entry：一个可执行文件或库的入口文件。
chunk：多个文件组成的一个代码块。例如把一个可执行文件和他所有依赖的模块组合为一个chunk，这体现了webpack的打包机制。
loader：文件转换器。例如把es6转换为es5，scss转换为css。
plugin：插件，用于扩展webpack的功能，在webpack构建生命周期的节点上加入扩展hook为webpack加入功能。

Webpack构建流程

解析webpack配置参数，合并从shell传入和webpack.config.js文件里配置的参数，生产最后的配置结果。
注册所有配置的插件，好让插件监听webpack构建生命周期的事件节点，以做出对应的反应。
从配置的entry入口文件开始解析文件构建AST语法树，找出每个文件所依赖的文件，递归下去。
在解析文件递归的过程中根据局文件类型和loader配置找出合适的loader用来对文件进行转换。
递归完后得到每个文件的最终结果，根据entry配置生成代码块chunk。
输出所有chunk到文件系统。

Webpack几种常见的loader

file-loader：把文件数出到一个文件夹中，在代码中通过相对URL去引用输出的文件。
url-loader：和file-loader类似，但是能在文件很小的情况下以base64的方式把文件内容注入到代码中去。
source-map-loader：加载额外的source map文件，以方便断点调试。
image-loader：加载并且压缩图片文件。
babel-loader：把es6转换成es5。
css-loader：加载CSS，支持模块化、压缩、文件导入等特性。
style-loader：把CSS代码注入到JavaScript中，通过DOM操作去加载CSS。
eslint-loader：通过ESLint检查JavaScript代码。

什么是模块的热更新？

模块热更新是webpack的一个功能，他可以使得代码修改过后不用刷新浏览器就可以更新，是高级版的自动刷新浏览器。
DevServer中通过hot属性可以控制模块的热替换。

通过配置文件

const webpack = require('webpack');
const path = require('path');
let env = process.env.NODE_ENV == "development" ? "development" : "production";
const config = {
  mode: env,
 devServer: {
     hot:true
 }
}
  plugins: [
     new webpack.HotModuleReplacementPlugin(), //热加载插件
  ],
module.exports = config;

2. 通过命令行

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "NODE_ENV=development  webpack-dev-server --config  webpack.develop.config.js --hot",
  },

懒加载（按需加载路由）

webpack中提供了require.ensure()来实现按需加载。以前引入路由是通过import这样的方式引入，改为const定义的方式进行引入。

不进行页面按需加载的引入方式：

import home from '../../common/home.vue'

进行页面按需加载的引入方式：

const home = r =>require.ensure([ ],() =>(require('../../common/home.vue')))

Webpack和grunt、gulp的不同

1. 概念区别：

（1）gulp/grunt是一种能够优化前端的开发流程的工具。
（2）webpack是一种模块化的解决方案。

2. 工作方式的区别：

（1）Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译、组合、压缩等任务的具体步骤。工具之后可以自动替你完成这些任务。

（2）Webpack的工作方式：把你的项目当做一个整体，通过给定的主文件（如：index.js），webpack将从这个文件开始找到你的项目的所有依赖文件，使用loader处理他们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。

3. 基于类型的区别

（1）grunt和gulp是基于任务和流（task、stream）的。类似jQury，找到一个（或一类）文件，对其做一系列链式操作，更新流上的数据，整条链式操作构成了一个任务，多个任务就构成了整个web的构建流程。
（2）webpack是基于入口的。webpack会自动地递归解析入口所需要加载的所有资源文件，然后用不同的loader来处理不同的文件，用plugin来扩展webpack功能。

Webpack实践

安装 Webpack

npm install webpack -g

创建项目

创建项目目录

mkdir app

添加runoob1.js

app/runoob1.js 文件

document.write("It works.");

在app目录下添加index.html文件

<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>

接下来我们使用 webpack 命令来打包：

webpack runoob1.js -o bundle.js

接下来我们创建另外一个 js 文件 runoob2.js

module.exports = "It works from runoob2.js.";

更新 runoob1.js 文件，代码如下：

document.write(require("./runoob2.js"));

接下来我们使用 webpack 命令来打包：

webpack runoob1.js -o bundle.js

Peter Pan 1231

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Webpack学习笔记

什么是webpack？webpack是一个现代JavaScript应用程序的静态模块打包器，在webpack里一切文件皆模块，通过loader转换文件，通过plugin注入钩子，最后输出由多个文件组合成的文件，webpack专注构建模块化项目。 webpack可以看做是模块打包机：他做的事情是，分析项目，找到JavaScript模块以及其他的一些浏览器不能直接运行的拓展语言（scss， ...
复制链接

扫一扫