webpack知识

Webpack

Webpack 学习记录之概念

什么是webpack

webpack是一个模块打包器,可以递归的构建一个依赖关系图,其中包含每个程序需要的每个模块,然后将所有模块打包成一个或多个bundle。他和其他的工具最大的不同在于他支持code-splitting、模块化(AMD,ESM,CommonJs)、全局分析。

bundle:bundle即由webpack打包出来的文件。

依赖关系:一个文件依赖于另一个文件,webpack就把这种关系视为依赖关系。所以webpack可以接受非代码资源,并把它们当做依赖提供给应用程序。

主要概念

入口:entry指示webpack使用哪个文件作为构建依赖图的开始。

出口: output指示webpack将打包好的bundles,如何命名以及输出到哪里。

loader:loader可以让webpack如处理那些非JS文件,将其转化为模块(webpack只理解JS)

插件:plugins可以打包优化和压缩等处理各种各样的任务。

模式:mode设置为开发还是生产环境

详细示例

3.1 入口 entry

3.2 输出 output
即使有多个入口文件,也只能规定一个输出配置

3.3 模式 mode

3.4 loader
由于webpack无法处理除了JS以外的文件,所以loader发挥了重要的作用。

loader用于对模块的源代码进行转换,即将不同的语言转化为js,或将内联图转化为 data URL,也允许你直接在JS中import css文件,并且在bundle中引入这些依赖。

3.5 插件 plugins
webpack 插件是一个具有 apply属性的 JavaScript 对象,用来解决loader无法实现的其他事。

概念补充

4.1模块 module
在模块化编程中,开发者将程序分解成离散功能块,并称之为模块。

模块以各种方式表达他们的依赖关系:

  • es2015 import 语句
  • commonjs require() 语句
  • AMD define 和 require 语句
  • css/sass/less文件中的 @import 语句
  • 样式url(...)或HTML文件<img src=.../>中的图片链接

4.2 模块解析 module resolution
resolver是一个库,用于帮助找到模块的绝对路径。当打包模块时,webpack使用enhanced-resolve来解析文件路径。

webpack中的解析规则:

4.3 Runtime 与 Manifest
在使用webpack构建的应用程序或站点中,有三种主要的代码类型:

(1)你或你的团队编写的代码;

(2)你的源码会依赖的任何第三方的 library 或 vendor 代码;

(3)webpack 的 runtime 和 mainfest,管理所有模块的交互。

当打包之后,应用程序的目录结构不复存在,webpack通过runtime与manifest管理各个模块之间的联系与交互。

manifest保留着所有模块的详细要点(比如依赖于哪个模块),将import或require语句都转化为__webpack_require__方法,指向模块标识符。

runtime根据manifest,查询模块标识符,实现模块的加载和逻辑解析。

4.4 模块热替换 hot module replacement
模块热替换会在应用程序运行过程中替换、添加或删除模块,而无需重新加载整个页面,主要通过以下方式来加快开发速度:

(1)保留在完全重新加载页面时丢失的应用程序状态;

(2)只更新变更的内容;

(3)像在浏览器调试器中更改样式一样快。


待理解之后补充:

(1)模块路径指向文件夹的查找方式;

(2)为何在使用缓存时,有些表面上的内容没有修改,计算出的哈希还是会改变。(文中原因::runtime和manifest的注入在每次构建都会发生变化);

(3)模块热替换的原理。


webpack简易入门

  • 安装 npm isntall webpack -g
  • 配置webpack.config.js
  • 配置package.json:运行npm run build 启动编译模式和npm run start热更新模式。

Webpack快速入门

了解Webpack相关

什么是webpack?

  • Webpack是一个模块打包器(bundler)。
  • 在Webpack看来, 前端的所有资源文件(js/css/img/less/...)都会作为模块处理
  • 它将根据模块的依赖关系进行静态分析,生成对应的静态资源

理解Loader

  • Webpack 本身只能加载JS模块,如果要加载其他类型的文件(模块),就需要使用对应的loader 进行转换/加载
  • Loader 本身也是运行在 node.js 环境中的 JavaScript 模块
  • 它本身是一个函数,接受源文件作为参数,返回转换的结果
  • loader 一般以 xxx-loader 的方式命名,xxx 代表了这个 loader 要做的转换功能,比如 json-loader。

配置文件(默认)

  • webpack.config.js : 是一个node模块,返回一个 json 格式的配置信息对象

插件

  • 插件件可以完成一些loader不能完成的功能。
  • 插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。
  • Webpack 本身内置了一些常用的插件,还可以通过 npm 安装第三方插件

学习文档 :

你将学到:

  • How to install webpack
  • How to use webpack
  • How to use loaders
  • How to use the development server
  • How to use image

初始化项目: package.json

安装webpack

npm install webpack@1 -g //全局安装
npm install webpack@1 --save-dev //局部安装

开始编译

  • 创建入口src/js/ : entry.js
    document.write("entry.js is work");
  • 创建主页面 build/: index.html
    <script type="text/javascript" src="js/build.js"></script>
  • 编译js
    webpack src/js/entry.js build/js/build.js
  • 查看页面效果

第二个js

  • 创建第二个js: src/js/content.js
    module.exports = " <br> It works from content.js";
  • 更新入口js : entry.js
  • 编译js:
    webpack src/js/entry.js build/js/build.js
  • 查看页面效果

第一个加载器(loader)

  • 安装样式的loader
    npm install css-loader style-loader --save-dev
  • 创建样式文件: src/css/test.css
  • 更新入口js : entry.js
  • 编译js, 并查看页面效果
    webpack src/js/entry.js build/js/bundle.js

绑定加载器

  • 更新入口js : entry.js
  • 编译:
    webpack src/js/entry.js build/js/bundle.js --module-bind css=style-loader!css-loader
  • 查看页面效果

使用webpack配置文件

  • 创建webpack.config.js
  • 编译
  • 问题---每次修改模块文件内容的重新手动打包,刷新
  • 自动编译
    webpack --watch //编译并启动监视(但需要刷新浏览器)
  • 浏览器自动刷新(热加载)----解决手动刷新浏览器问题

加载图片

  • 安装依赖的loader
  • 添加config中loader的配置
    { test: /\.(png|jpg)$/, loader: "url-loader?limit=8192" } //如果图片小于limit就会进行Base64编码
  • 拷入2张图片:
    • 小图: img/logo.png
    • 大图: img/big.jpg
  • 定义引用图片的样式: test.css
  • 在页面引用样式或图片: index.html
  • 编译并浏览
    webpack-dev-server
  • 图片打包问题

配置npm script命令

webpack第一个demo

目录结构

项目初始化

dist/index.html

src/entry.js

document.getElementById("title").innerHTML = "hello";

打包

webpack 入口文件 出口文件
wenpack src/entry.js dist/bundle.js

打包的结果

打包后在bundle.js中的位置

开启本地服务器


Webpack + xxx配合使用

Webpack + Babel

在webpack中使用Babel通过使用babel-loader即可,babel中的配置可以通过options选项进行配置。
安装:
npm i babel-loader -D

webpack.config.js

.babelrc

Webpack + ESLint

使用ESLint使用eslint-loader即可,类似于babel-loader的使用
安装:
npm i eslint-loader -D

Webpack + Sass

在Webpack中对Sass进行编译需要使用sass-loader,而sass-loader依赖于node-sass和webpack,因此需要安装
npm i node-sass sass-loader webpack -D

由于sass没有提供重写url的功能,因此所有的链接资源都是相对于输出文件(output)来说的,因此在实际开发中通常会加入resolve-url-loader来实现资源url的正常使用
npm i resolve-url-loader -D

和style-loader、css-loader一起使用,这样就可以正常使用编译sass了

Webpack + Less

类似于Sass的使用,Less的编译只需要安装less-loader即可
npm i less-loader -D


webpack 资源分享

webpack入门级别 (适合新手入门) 有图文并茂 简单的例子轻松让新手入门。

webpack入门 - 汇智网

webpack官方手册 全英文,水平不好的不建议看

阮一峰的webpack 这个非常简单也适合新手入门再配简单的案例让你轻松上手。

傻瓜化github指南1

傻瓜化github指南2

webpack 入门及实践

七天学会node

webpack4 系列文章

webpack 中文文档(v4.15.1)

深入浅出webpack学习-系列

[译]开启webpack之旅-系列

webpack

webpack4 系列文章

[webpack并不难]总结
[]()
[]()
[]()
[]()

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复