webpack学习--webpack经典7分钟入门教程

2024-09-28 22:29:16

一.什么是 Webpack

Webpack 是一个模块打包器。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

webpack模式图

二.为什么使用webpack

市面上已经存在的模块管理和打包工具并不适合大型的项目，尤其单页面 Web 应用程序。最紧迫的原因是如何在一个大规模的代码库中，维护各种模块资源的分割和存放，维护它们之间的依赖关系，并且无缝的将它们整合到一起生成适合浏览器端请求加载的静态资源。而webpack有以下几个优点：

1.将依赖树拆分成按需加载的块：Webpack 有两种组织模块依赖的方式，同步和异步。异步依赖作为分割点，形成一个新的快。在优化了依赖树后，每一个异步区块都作为一个文件被打包。

2.初始化加载的耗时尽量少：Webpack 使用异步 I/O 和多级缓存提高运行效率，这使得 Webpack 能够以令人难以置信的速度快速增量编译。

3.各种静态资源都可以视作模块：Webpack 本身只能处理原生的 JavaScript 模块，但是 loader 转换器可以将各种类型的资源转换成 JavaScript 模块。这样，任何资源都可以成为 Webpack 可以处理的模块。

4.将第三方库整合成模块的能力：Webpack 有一个智能解析器，几乎可以处理任何第三方库，无论它们的模块形式是 CommonJS、 AMD 还是普通的 JS 文件。甚至在加载依赖的时候，允许使用动态表达式 require("./templates/" + name + ".jade")。

5.自定义打包逻辑的能力：Webpack 还有一个功能丰富的插件系统。大多数内容功能都是基于这个插件系统运行的，还可以开发和使用开源的 Webpack 插件，来满足各式各样的需求。

6.适合大项目，无论是单页还是多页的 Web 应用

三.安装webpack

首先要安装 Node.js， Node.js 自带了软件包管理器 npm，Webpack 需要 Node.js v0.6 以上支持，建议使用最新版 Node.js。

用 npm 安装 Webpack：

$ npm install webpack -g

此时 Webpack 已经安装到了全局环境下，本课程中我们已装好webpack，可以通过命令行 webpack -h 试试。

通常我们会将 Webpack 安装到项目的依赖中，这样就可以使用项目本地版本的 Webpack。

1.进入项目目录

2.确定已经有 package.json，没有就通过 npm init 创建

3.输入命令 $ npm install webpack --save-dev 安装 webpack 依赖

Webpack 目前有两个主版本，一个是在 master 主干的稳定版，一个是在 webpack-2 分支的测试版，测试版拥有一些实验性功能并且和稳定版不兼容，在正式项目中应该使用稳定版。

# 查看 webpack 版本信息
$ npm info webpack
# 安装指定版本的 webpack
$ npm install webpack@1.12.x --save-dev

四.在项目中使用webpack

首先有一个静态页面 index.html，

<!-- index.html -->
<html>
<head>
 <meta charset="utf-8">
</head>
<body>
 <script src="bundle.js"></script>
</body>
</html>

现在创建一个 JS 入口文件 entry.js：

  // entry.js
 pico entry.js
 // 进入编辑器输入
 document.write('It works.');
 // 保存并退出

然后编译 entry.js 并打包到 bundle.js，运行命令：

$ webpack ./entry.js bundle.js

如果成功，打包过程会显示日志：

 Hash: aeec068c58e1e78f0fb6
 Version: webpack 1.12.9
 Time: 70ms
 Asset   Size Chunks       Chunk Names
 bundle.js 1.48 kB    0 [emitted] main
 [0] ./entry.js 87 bytes {0} [built]

在点击访问测试将会打开一个新的窗口。它应该会显示It works.。

注意：下面的课程中创建编辑文件都是用pico 文件名。

下一步，我们将把一些代码移到一个额外的文件中content.js 并修改入口 entry.js：

 // content.js
 pico content.js
 // 编辑内容
 module.exports = "It works from content.js.";

 // 修改entry.js
 //document.write('It works.');
 document.write(require("./content.js")); // 添加content.js

编译文件

 $ webpack ./entry.js bundle.js

更新您的浏览器窗口，您应该看到文本It works from content.js.

执行成功，会显示

  Hash: ef96fed65f6d3ebc0dd7
Version: webpack 1.12.9
Time: 91ms
  Asset  Size Chunks       Chunk Names
bundle.js 1.7 kB    0 [emitted] main
  [0] ./entry.js 133 bytes {0} [built]
  [1] ./content.js 97 bytes {0} [built]

Webpack 会分析入口文件，解析包含依赖关系的各个文件。这些文件（模块）都打包到 bundle.js 。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。在页面启动时，会先执行 entry.js 中的代码，其它模块会在运行 require 的时候再执行。

五.Loader介绍和使用

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。

Loader 可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。这样，我们就可以通过 require 来加载任何类型的模块或文件，比如 CoffeeScript、 JSX、 LESS 或图片。

loader 有以下这些特点：

1.Loader 可以通过管道方式链式调用，每个 loader 可以把资源转换成任意格式并传递给下一个 loader ，但是最后一个 loader 必须返回 JavaScript。

2.Loader 可以同步或异步执行。

3.Loader 运行在 node.js 环境中，所以可以做任何可能的事情。

4.Loader 可以接受参数，以此来传递配置项给 loader。

5.Loader 可以通过文件扩展名（或正则表达式）绑定给不同类型的文件。

6.除了通过 package.json 的 main 指定，通常的模块也可以导出一个 loader 来使用。

7.Loader 可以访问配置。

8.插件可以让 loader 拥有更多特性。

9.Loader 可以分发出附加的任意文件。

我们想要在应用中添加一个css文件。

WebPACK只能处理JavaScript本身，所以我们需要css-loader去处理 CSS。我们还需要style-loader去应用这个样式在CSS文件。

安装 loader：

npm install css-loader style-loader

注意：安装 loaders（只需要在本地安装，不需 -g）将会创建一个 node_modules 文件夹，在哪里 loaders 将会激活。

我们要在页面中引入一个 CSS 文件 style.css，首页将 style.css 也看成是一个模块，然后用 css-loader 来读取它，再用 style-loader 把它插入到页面中。

添加一个style.css文件

 body {
  background: blue;
}

修改 entry.js：

  + require("!style!css!./style.css");  // 载入 style.css
 document.write(require("./content.js"));

重新编译并更新您的浏览器看到蓝色背景。

扩展名自动绑定loader

如果每次 require CSS 文件的时候都要写 loader 前缀，是一件很繁琐的事情。

我们可以根据模块类型（扩展名）来自动绑定需要的 loader这样写require("./style.css")。

修改entry.js

- require("!style!css!./style.css");
+ require("./style.css");
 document.write(require("./content.js"));

注意：-表示这行删掉或者注释掉，+表示新增的内容。

编译:

webpack ./entry.js bundle.js --module-bind "css=style!css"

注意：！在shell中有特殊意义，需要转义,这样写才会成功的

webpack ./entry.js bundle.js --module-bind "css=style!css"

六.配置文件

Webpack 在执行的时候，除了在命令行传入参数，还可以通过指定的配置文件来执行。默认情况下，会搜索当前目录的 webpack.config.js 文件，这个文件是一个 node.js 模块，返回一个 json 格式的配置信息对象，或者通过 --config 选项来指定配置文件。

我们想将配置选项移动到配置文件中，创建一个配置文件 webpack.config.js：

 module.exports = {
  entry: "./entry.js",
  output: {
    path: __dirname,
    filename: "bundle.js"
  },
  module: {
    loaders: [
      { test: /.css$/, loader: "style!css" }
    ]
  }
};

现在我们仅仅运行:

webpack

如果完成成功，将会返回运行结果，该命令将尝试WebPACK当前目录中加载文件webpack.config.js。

这里对Webpack的打包行为做了配置，主要分为几个部分：

entry：指定打包的入口文件，每有一个键值对，就是一个入口文件
output：配置打包结果，path定义了输出的文件夹，filename则定义了打包结果文件的名称
module：定义了对模块的处理逻辑，这里可以用loaders定义了一系列的加载器，以及一些正则。当需要加载的文件匹配test的正则时，就会调用后面的loader对文件进行处理，这正是webpack强大的原因。

漂亮的输出

如果该项目的增长，编译可能需要更长的时间。所以我们要展示一些进度条。我们想要的颜色…

我们可以这样

 webpack --progress --colors

七.插件

插件可以完成更多 loader 不能完成的功能。

插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。

Webpack 本身内置了一些常用的插件，还可以通过 npm 安装第三方插件。

接下来，我们利用一个最简单的 BannerPlugin 内置插件来实践插件的配置和运行，这个插件的作用是给输出的文件头部添加注释信息。

修改 webpack.config.js，添加 plugins：

 var webpack = require('webpack');
module.exports = {
 entry: './entry.js',
 output: {
  path: __dirname,
  filename: 'bundle.js'
 },
 module: {
  loaders: [
   {test: /.css$/, loader: 'style!css'}
  ]
 },
 plugins: [
  new webpack.BannerPlugin('This file is created by mutouren')
 ]
}

然后运行 webpack，打开 bundle.js，可以看到文件头部出现了我们指定的注释信息：

/! This file is created by mutouren /
/**/ (function(modules) { // webpackBootstrap
/**/   // The module cache
/**/   var installedModules = {};
// 后面代码省略......

一个 url-loader 来说，它会将样式中引用到的图片转为模块来处理，使用该加载器需要先进行安装：

npm install url-loader

修改style.css文件

 body {
  color:#fff;
  background: url('./logo.png');
}

配置webpack.config.js文件

 module.exports = {
  entry: "./entry.js",
  output: {
    path: __dirname,
    filename: "bundle.js"
  },
  module: {
    loaders: [
      { test: /.css$/, loader: "style!css" },
      { test: /.(png|jpg)$/, loader: "url?limit=40000" }  // 添加到这
    ]
  }
};

注意后面那个limit的参数，当你图片大小小于这个限制的时候，会自动启用base64编码图片。

我们还是运行

webpack

将会看到背景图片已设置成功。

八.在 Webpack 中使用别名

模块别名定义，方便后续直接引用别名，无须多写长长的地址，比如我们现在想要把scripts/jquery.min.jsjquery压缩文件打包.

别名（resolve.alias）是 Webpack 的一个配置项，它的作用是把用户的一个请求重定向到另一个路径，例如通过修改 webpack.config.js 配置文件，jquery为别名加入：

resolve: {
 alias: {
   jquery: "./scripts/jquery.min.js"
 }
}

例如我们之前不用别名，在entry.js中，想要把jquery打包

require('./scripts/jquery.min.js');

设置别名，就可以修改为

require('jquery');

这样待打包的脚本中的 require('jquery'); 其实就等价于 require('./scripts/jquery.min.js'); 。通过别名的使用在本例中可以减少几乎一半的时间。

我们把需要的jquery打包了，但是现在前台页面想要直接用还是不可以的，需要我们把jquery暴露出来。

你可能在全局中使用了一个压缩版本的 jquery，为了修复你可以安装这个暴露全局加载器

npm install expose-loader --save-dev

然后像下面这样修改entry.js：

require('expose?$!jquery');

把$作为别名为jquery的变量暴露到全局上下文中。

现在我们在页面就可以使用$，例如：

 $('h1').text();

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

webpack入门+react环境配置

小结放在前:这篇文章主要是为下一篇的react提前铺好路,webpack是一个前端资源模块化管理和打包工具,说白了就是方便我们管理自己的常用的一些代码,比如你开发中用到sass以及jade同时用到es6,开发时你不可能改动某个地方就挨个命令去转换在到浏览器去看效果,那样效率是非常低的.所以webpack帮我们省去了那些多余的步骤 webpack 基本安装开始前还是万万不能缺少的安装: npm install webpack -g 安装完接着是建个文件夹新建一个package.json依赖管理文
webpack入门必知必会

前言这是我第一篇介绍webpack的文章,先从一个入门教程开始吧,后续会有更多相关webpack的文章推出. 首先什么是webpack?如果说它是一个打包工具那真的是有点大材小用了.我个人认为webpack是一个集前端自动化.模块化.组件化于一体的可拓展系统,你可以根据自己的需要来进行一系列的配置和安装,最终实现你需要的功能并进行打包输出. 本文作为一篇入门教程,这里先从webpack最简单的3招开始介绍,即拆分.打包.压缩. 步骤 1.传统项目中的问题在不依赖任何自动化.模块化工具的项目中
webpack+vue.js快速入门教程

前言 vuejs--轻量.学习成本低.双向绑定.无dom的操作.组件的形式编写 vuejs是个轻量级的mvvm框架, 集合了angular的基本功能,却又比angular更为精简,功能上涵盖了双向绑定.指令.逻辑控制.过滤器.事件监听.函数等.框架的特点使得项目在状态变更.分页的场景下可以拥有很大的便利--所有的操作只需要变更数组,没有任何的dom操作. webpack--CommonJS的引用和编写方式.loader非常的丰富,包括vue-loader.css-loader.less-loa
webpack学习--webpack经典7分钟入门教程

一.什么是 Webpack Webpack 是一个模块打包器.它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源. webpack模式图二.为什么使用webpack 市面上已经存在的模块管理和打包工具并不适合大型的项目,尤其单页面 Web 应用程序.最紧迫的原因是如何在一个大规模的代码库中,维护各种模块资源的分割和存放,维护它们之间的依赖关系,并且无缝的将它们整合到一起生成适合浏览器端请求加载的静态资源.而webpack有以下几个优点: 1.将依赖树拆分成按需加
HTML 30分钟入门教程

运行下面的代码就可以了 HTML 30分钟入门教程 h1 {text-align:center} p {text-indent:2em; line-height:140%; margin:auto 10px} span {margin:3px} .code { border:solid 1px gray; background-color:#eee} .name { font-weight:bold } dl {margin-left:20px} dt {font-weight:bold} .t
正则表达式30分钟入门教程 v2.1版

运行下面的代码就可以看到正则表达式30分钟入门教程 h1 {text-align:center} p {text-indent:2em; line-height:140%; margin:auto 10px} span {margin:3px} table {margin:auto; border-style:solid; border-width:1px 1px 0 0; border-color:gray} td, th {border-style:solid; border-width:
Spring Security十分钟入门教程

目录写在前面目标开始不引入Spring Security访问接口引入Spring Security访问接口退出登录后记写在前面我们在学习技术的过程中,学习的渠道大概有以下几种:看书,视频,博客.我们会发现,一种技术开始流行的时候,各种形式的讲述也就出现了.那么,出书,录视频,写博客的人,在他们之前,是没有什么现成的东西让他们学习的,他们是怎么上手的呢?换句话说,怎么才能有效的快速的上手一门技术呢? 这篇文章,我们一起从零开始学习SpringSecurity,技术点不重要,重要的
Pytorch学习笔记DCGAN极简入门教程

目录 1.图片分类网络 2.图片生成网络首先是图片分类网络: 重点是生成网络每一个step分为三个步骤: 1.图片分类网络这是一个二分类网络,可以是alxnet ,vgg,resnet任何一个,负责对图片进行二分类,区分图片是真实图片还是生成的图片 2.图片生成网络输入是一个随机噪声,输出是一张图片,使用的是反卷积层相信学过深度学习的都能写出这两个网络,当然如果你写不出来,没关系,有人替你写好了首先是图片分类网络: 简单来说就是cnn+relu+sogmid,可以换成任何一个分类网络
学习正则表达式30分钟入门教程(第二版)

由于本人内容过多排版比较乱,推荐大家浏览单独网页版 http://www.jb51.net/tools/zhengze.html 本文目标 30分钟内让你明白正则表达式是什么,并对它有一些基本的了解,让你可以在自己的程序或网页里使用它. 如何使用本教程最重要的是--请给我30分钟,如果你没有使用正则表达式的经验,请不要试图在30秒内入门--除非你是超人 :) 别被下面那些复杂的表达式吓倒,只要跟着我一步一步来,你会发现正则表达式其实并没有你想像中的那么困难.当然,如果你看完了这篇教程之后,发现
Cython 三分钟入门教程

作者:perrygeo译者:赖勇浩(http://laiyonghao.com)原文:http://www.perrygeo.net/wordpress/?p=116 我最喜欢的是Python,它的代码优雅而实用,可惜纯粹从速度上来看它比大多数语言都要慢.大多数人也认为的速度和易于使用是两极对立的--编写C代码的确非常痛苦.而 Cython 试图消除这种两重性,并让你同时拥有 Python 的语法和 C 数据类型和函数--它们两个都是世界上最好的.请记住,我绝不是我在这方面的专家,这是我的第一次
Symfony学习十分钟入门经典教程

Symfony是一个强大的基于PHP的Web开发框架,在这里我们用十分钟的时间来做一个简单的增删改查的程序, 任何不熟悉Symfony的人都可以通过这个教程完成自己的第一个Symfony程序. 如果需要这个样例程序的全部源代码,可以访问这里 ,或者通过下面的方式获取源代码: $git clone https://github.com/saharabear/symfony-sample.git 项目初始化首先,需要你在自己的电脑中安装PHP环境并安装git.这方面的内容属于基础内容,网络上有大
react.js使用webpack搭配环境的入门教程

本文介绍了react.js使用webpack搭配环境的入门教程,分享给大家,也给自己做个笔记如果你想直接上手开发,而跳过这些搭配环境的繁琐过程,推荐你使用官方的create-react-app命令 npm install -g create-react-app //安装create-react-app脚手架 npm为node.js的包管理工具,请确保你已经安装了node.js create-react-app my-app //使用create-react-app创建,my-app为项目名称
WebPack工具运行原理及入门教程

WebPack是什么一个打包工具一个模块加载工具各种资源都可以当成模块来处理网站 http://webpack.github.io/ 如今,越来越多的JavaScript代码被使用在页面上,我们添加很多的内容在浏览器里.如何去很好的组织这些代码,成为了一个必须要解决的难题. 对于模块的组织,通常有如下几种方法: 通过书写在不同文件中,使用script标签进行加载 CommonJS进行加载(NodeJS就使用这种方式) AMD进行加载(require.js使用这种方式) ES6模块思考:

webpack学习--webpack经典7分钟入门教程

相关推荐

随机推荐