webpack教程

最新推荐文章于 2022-12-14 09:26:13 发布
最新推荐文章于 2022-12-14 09:26:13 发布
阅读量768 收藏
点赞数
分类专栏： React.js 文章标签： webpack

那么，webpack 是什么？

MODULE BUNDLER

它是这么自称的，模块打包器。

在 webpack 里，所有类型的文件都可以是模块，包括我们最常见的 JavaScript，及 CSS 文件、图片、json 文件等等。通过 webpack 的各种加载器，我们可以更高效地管理这些文件。

这里写图片描述

1.安装 webpack

我们通过 npm 在全局环境下安装 webpack：

➜ npm install webpack -g

安装完成后，我们可以使用 webpack 命令，执行

➜ webpack --help

能够查看 webpack 提供的所有命令。

不过，建议在项目下安装一份开发环境的 webpack：

➜ npm install webpack --save-dev

如果觉得 npm 安装太慢，可以尝试 npm 的替代工具 ied – 我的使用经历，它的速度比 npm 快太多了。

2.初始化项目

安装好 webpack 后，我们要怎么开始一个项目？

如果你用过 grunt.js、gulpjs 一类工具，它们可以借助 yeoman 来初始化项目。webpack 的情况不太一样，我们可以把它当作 node.js 项目来初始化。

但这里还是聊聊如何手动初始化一个 webpack 项目。

创建一个 package.json 文件，用于保存项目版本、依赖关系等

➜ npm init -y

在当前目录下安装 webpack

➜ npm install webpack --save-dev

这时，我们的项目下有两个内容：

  1. package.json 文件
  2. node_modules 文件夹

我们还需要一个 index.html 文件，示例如下：

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>webpack 教程</title>
  </head>
  <body>
  </body>
  </html>

现在，我们可以通过浏览器访问到 index.html 页面。

目前页面上还是一片空白，除了一个标题。

3.webpack 配置

单页面应用里，项目通常会有一个入口（entry）文件，假设是 main.js，我们通过配置 webpack 来指明它的位置。

首先，在项目根目录新建一个 webpack.config.js，这是 webpack 默认的配置文件名称，添加以下内容：

  module.exports = {
    entry: './main.js'
  };

尝试在项目根目录执行 webpack，会提示我们，

Output filename not configured.

因为我们只是设定了入口（entry），还没有指定一个输出文件的路径与名称。

在 webpack.config.js 中添加一个 output：

  module.exports = {
      entry: './main.js',
      output: {
          path: __dirname, // 输出文件的保存路径
          filename: 'bundle.js' // 输出文件的名称
      }
  }

现在在项目里执行 webpack 命令，我们的根目录下会多出一个 bundle.js 文件.

接下来，在 index.html 中引用 bundle.js 文件：

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webpack 教程</title>
</head>
<body>
  <script src="./bundle.js"></script> <!-- 在 index.html 文件中添加这一行代码 -->
</body>
</html>

大功告成。

这是 webpack 一类工具的特点，它们在 HTML 文件直接引用构建后的 js 文件，而不是源文件。

当然，这可能会引发性能问题，毕竟，如果每一点文件修改都会导致整个 bundle.js 文件重新构建的话，碰上大一点的项目，有几千个源文件要编译，编译速度可能很慢。webpack 有它的解决办法，具体参见它的文档。

4.实时刷新

在 html 文件中引用 bundle.js 文件后，我们有几个问题需要解决。

  1. main.js 或它所引用的模块的变化如何通知 webpack，重新生成 bundle.js？

    非常简单，在根目录下执行 webpack –watch 就可以监控目录下的文件变化并实时重新构建。

  2. 上面只是实时构建，我们该如何把结果通知给浏览器页面，让 HTML 页面上的 bundle.js 内容保持最新？

    webpack 提供了 webpack-dev-server 解决实时刷新页面的问题，同时解决实时构建的问题。

​

4.1安装 webpack-dev-server

1.在全局环境中安装 webpack-dev-server：

➜ npm install webpack-dev-server -g
  1. 在项目根目录下执行命令：
➜ webpack-dev-server

这样，我们就可以在默认的 http://localhost:8080 网址上打开我们的 index.html。

此时，我们可能认为事情是按以下顺序发生的，

  1. js 文件修改
  2. webpack-dev-server 监控到变化
  3. webpack 在内存中重新构建 bundle.js
  4. webpack-dev-server 保证页面引用的 bundle.js 文件与内存中一致

但不幸的是，我们「自以为是」了。http://localhost:8080/index.html 对 js 文件的变化无动于衷。

webpack-dev-server 提供了两种模式用于自动刷新页面：

1.iframe 模式

我们不访问 http://localhost:8080，而是访问 http://localhost:8080/webpack-dev-server/index.html

2.inline 模式

在命令行中指定该模式，webpack-dev-server –inline。这样 http://localhost:8080/index.html 页面就会在 js 文件变化后自动刷新了。

以上说的两个页面自动刷新的模式都是指刷新整个页面，相当于点击了浏览器的刷新按钮。

webpack-dev-server 还提供了一种 –hot 模式，属于较高阶的应用。

5.第三方库

webpack 并不是包管理器，所以如果我们要使用第三方库，需要借助 npm。比如，在项目里安装 jQuery：

➜ npm install jquery --save

这样我们在当前项目目录下安装了 jQuery，并将它写入 package.json 里的依赖里。

6.模块化

6.1 模块化 JavaScript

如果我想用 ES6 的方式引入 jQuery 模块，比如：

import $ from 'jquery'

怎么办？浏览器目前还不提供原生支持，webpack 原生也仅支持 CommonJS 的那种写法，但借助 babel-loader ，我们可以加载 es6 模块：

1.安装 babel-loader

npm install babel-loader babel-core babel-preset-es2015 --save-dev

2.配置 webpack.config.js

在 module.exports 值中添加 module：

module.exports = {
  entry: {
      app: ['./main.js']
  },
  output: {
      filename: 'bundle.js'
  },
  module: {
      loaders: [{
          test: /\.js$/,
          loaders: ['babel?presets[]=es2015'],
          exclude: /node_modules/
      }]
  }
}

这样我们就可以在我们的 js 文件中使用 ES6 语法，babel-loader 会负责编译成浏览器可以识别的格式。

6.2 CSS 加载器

我们可以按传统方法使用 CSS，即在 HTML 文件中添加：

  <link rel="stylesheet" href="style/app.css">

但 webpack 里，CSS 同样可以模块化，使用 import 导入。

因此我们不再使用 link 标签来引用 CSS，而是通过 webpack 的 style-loader 及 css-loader。前者将 css 文件以 标签插入 头部，后者负责解读、加载 CSS 文件。

1.安装 CSS 相关的加载器

➜ npm install style-loader css-loader --save-dev

2.配置 webpack.config.js 文件

  {
    module: {
        loaders: [
            { test: /\.css$/, loaders: ['style', 'css'] }
        ]
    }
  }

3.在 main.js 文件中引入 css

   import'./style/app.css';

这样，在执行 webpack 后，我们的 CSS 文件就会被打包进 bundle.js 文件中，如果不想它们被打包进去，可以使用 extract text 扩展。

6.3模块化 CSS

上一步里，我们 import 到 JavaScript 文件中的 CSS 文件中的 CSS 在打包后是仍然是全局的，也就是说，我们只是换了种加载 CSS 的方式，在书写 CSS 的时候，还是需要注意使用命名规范，比如使用 BEM，否则全局环境 CSS 类的冲突等问题不会消失。

这里，webpack 做了一个模块化 CSS 的尝试，真正意思上的「模块化」，即 CSS 类不会泄露到全局环境中，而只会定义在 UI 模块内 – 类似 react.js 这类模块，或者 web components。

autoprefixer

我们在写 CSS 时，按 CSS 规范写，构建时利用 autoprefixer 可以输出 -webkit、-moz 这样的浏览器前缀，webpack 同样是通过 loader 提供该功能。

1.安装 autoprefixer-loader

➜ npm install autoprefixer-loader --save-dev

2.配置 webpack.config.js

  loaders: [{
    test: /\.css$/,
    loader: 'style!css!autoprefixer?{browsers:["last 2 version", "> 1%"]}',
  }]

3.重启 webpack-dev-server

假如我们在 CSS 中写了 body { display: flex; } 规则，再查看 bundle.js 文件的话，我们能看到类似如下的代码：

body {\n\tdisplay: -webkit-box;\n\tdisplay: -webkit-flex;\n\tdisplay: -ms-flexbox;\n\tdisplay: flex;\n}

6.4图片

图片同样可以是模块，但使用的是 file loader 或者 url loader，后者会根据定义的大小范围来判断是否使用 data url。

import loadingIMG from 'file!../img/loading.gif'

React.render(<img src={loadingIMG} />, document.getElementById('app'));

7.打包、构建

项目结束后，代码要压缩、混淆、合并等，只需要在命令行执行：

➜ webpack

即可，webpack 根据 webpack.config.js 文件中的配置路径、构建文件名生成相应的文件。

通常，我们会额外定义一个专门用于生产环境的配置文件，比如 webpack.production.config.js，其中可以做许多代码优化。

原文地址：https://www.zfanw.com/blog/webpack-tutorial.html

jeikerxiao
关注
专栏目录
Webpack教程
weixin_48333948的博客
11-18 185
什么是Webpack Webpack是一个模块打包器，它的主要目标是将JavaScript文件打包在一起，打包后的文件用于在浏览器中使用。 ----Webpack中文文档 使用步骤 安装 npm install --save-dev webpack npm install --save-dev webpack-cli 这两行命令会为你的项目安装webpack和webpack-cli包，前者是webpack的核心库，后者是分离出来的webpack命令行功能，我们需要使用webpack-cli来进行项目
Webpack--入门只看这一篇就够了(图文＋代码）
最新发布
weixin_46714216的博客
07-28 4954
代码分离（code splitting）和懒加载（lazy loading）是Webpack中用于优化资源加载的两种技术。代码分离是将打包生成的代码文件拆分成多个较小的文件，而不是将所有代码打包到一个文件中。这样做的好处是可以提高初始加载速度，并减小每个页面的加载所需的数据量。通过代码分离，只需在需要时加载特定模块，提高了页面的响应速度和用户体验。懒加载是指在需要时才加载某个模块，而不是在初始加载时就将所有代码一次性加载完毕。通过懒加载，可以将页面分成多个模块，并根据需要动态地加载模块。
Webpack 教程
qqxhb 资源共享
05-13 324
官网原文v4.31.0 指南 本指南章节包含有关理解和掌握 webpack 提供的各种工具和特性。首先，介绍如何安装。然后是起步、资源管理等会逐步带你由浅入深，了解webpack。 1 安装 本节将介绍安装 webpack 的各种方法。 1.1 前提条件 在开始之前，请确保安装了 Node.js 的最新版本。最好使用 Node.js 最新的长期支持版本(LTS - Long Term Suppor...
webpack教程从第一步开始萌新也可以阅读
08-10
这个“webpack 教程从第一步开始”的内容，显然是为了引导初学者逐步理解并掌握这个强大的构建工具。在JavaScript开发领域，Webpack 已经成为了前端项目不可或缺的一部分，它能将各种资源（如JavaScript、CSS、图片...
webpack-tutorial:姜瑞涛官方网站的Webpack教程代码
05-07
在姜瑞涛的Webpack教程中，你将学习如何创建基本的Webpack配置，添加和配置加载器，使用插件，以及如何进行模块化开发。这个过程可能会涉及到设置`package.json`文件，安装必要的依赖，以及理解Webpack构建流程。...
webpack使用教程
qq_40096030的博客
03-04 5650
webpack使用教程webpack是什么为什么要使用webpackwebpack的五个核心概念开始使用打包样式资源插件打包图片资源devServer打包优化提取css文件压缩css性能优化优化代码调试 webpack是什么 本质上，webpack 是一个用于现代 JavaScript 应用程序的_静态模块打包工具_。当 webpack 处理应用程序时，它会在内部构建一个 依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。 以上解释截图自官
webpack之傻瓜式教程
qiupu4667的博客
04-12 808
接触webpack也有挺长一段时间了，公司的项目也是一直用着webpack在打包处理，但前几天在教新人的情况下，遇到了一个问题，那就是：尽管网上的webpack教程满天飞，但是却很难找到一个能让新人快速入手的、接地气的、傻瓜式的教程，自己手把手教又太浪费时间。想了一想，决定自己写一篇webpack的傻瓜式教程，旨在教会尚未了解webpack的人迅速入手。   对于webpack的概念、
WebPack基础教程
qq_36801250的博客
04-21 369
WebPack基础教程 WebPack是目录前端用于构建自动化开发的一款非常流行的工具，与之前的gulp和grunt功能非常相似，它们都是一款通过JavaScript来构建Web网站的自动化工具！ 本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependenc...
Webpack 详细教程
qq_51986661的博客
12-14 1448
文档: https://webpack.docschina.org/Webpack 是一个模块打包器 (bundler)，本质就是一个工具包。在 Webpack 看来，项目源码中所有的静态资源文件都是模块，如 JS / JSON / CSS / LESS / IMG / FONTS 等等，这些文件都会作为模块来处理。Webpack 会根据模块之间的依赖关系，进行分析打包所有在整个依赖图中的模块资源，生成最终的浏览器能高效运行的静态资源。
Webpack详细教程
qq_42453562的博客
08-25 1790
webpack第 1 章：webpack 简介1.1 webpack 是什么1.2 webpack 五个核心概念1.2.1 Entry 入口(Entry)1.2.2 Output 输出(Output)1.2.3 Loader1.2.4 Plugins1.2.5 Mode第 2 章：webpack 的初体验2.1 初始化配置三级目录第 3 章：webpack 开发环境的基本配置第 4 章：webpack 生产环境的基本配置第 5 章：webpack 优化配置第6 章：webpack 配置详情第 7 章：web
Webpack 入门教程
m0_37477061的博客
05-09 136
https://www.runoob.com/w3cnote/webpack-tutorial.html
Webpack入门教程
Maggie的博客
09-27 314
https://www.runoob.com/w3cnote/webpack-tutorial.html
webpack 教程
07-28
webpack教程是一篇关于使用webpack进行前端项目构建的文章。它包含了webpack的安装、配置、加载器和插件的使用等内容。在教程中，作者介绍了webpack与其他构建工具（如grunt和gulp）的区别，并详细说明了webpack的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值