Skip to content

Files

Latest commit

3b2bb6c · Nov 7, 2018

History

History

chapter03

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
Nov 7, 2018
Nov 7, 2018
Nov 7, 2018

README.md

Chapter03 - Webpack 示例代码

​:open_book: 本章节教程文档:Chapter03 - Webpack

webpack2

使用方法:

codes/chapter03/webpack2 目录下执行命令

$ npm install
$ npm run build

编译结束后,会在每个 demo 目录下生成 dist 目录,其中包含了 webpack 的输出文件。此时,直接在浏览器打开 index.html 文件,就可以看到展示。

此外,在各 demo 目录下,直接执行 webpack-dev-server 命令,启动一个 web app。其中,demo02demo03 的示例,需要打开 http://localhost:8080/ 进行访问。其它示例,因为配置了 OpenBrowserPlugin ,会直接打开浏览器访问。

如果需要清除编译输出文件,执行以下命令

$ npm run clean

demo00

使用方法

  1. 执行命令
$ webpack ./app/index.js ./dist/bundle.js
  1. 在浏览器中打开 index.html 文件。

​:flashlight: 示例DEMO00: (SOURCE)

demo01

单入口的 webpack 示例。

​:flashlight: 示例DEMO01: (DEMO / SOURCE)

demo02

多入口的 webpack 示例。

🔦 示例DEMO02: (DEMO / SOURCE)

demo03

HtmlWebpackPlugin + OpenBrowserPlugin 根据 Html 模板生成包含 bundle 的 html 文件,并且自动打开浏览器。

🔦 示例DEMO03: (DEMO / SOURCE)

demo04

webpack + react:webpack 自动将 js 中的 React 语法转义为浏览器可以识别的 JavaScript 语法。

🔦 示例DEMO04: (DEMO / SOURCE)

demo05

使用 webpack.optimize.UglifyJsPlugin 插件,压缩 js 文件。

🔦 示例DEMO05: (DEMO / SOURCE)

demo06

打包、加载 css 文件。

🔦 示例DEMO06: (DEMO / SOURCE)

demo07

打包、压缩图片文件。

​:flashlight: 示例DEMO07: (DEMO / SOURCE)

demo08

添加字体

🔦 示例DEMO08: (DEMO / SOURCE)

demo09

代码分离 - CSS

🔦 示例DEMO09: (DEMO / SOURCE)

demo10

代码分离 - Libraries

🔦 示例DEMO10: (DEMO / SOURCE)

demo11

代码分离 - 异步

🔦 示例DEMO11: (DEMO / SOURCE)

demo12

webpack 开发工具 webpack-dev-server 的使用

🔦 示例DEMO12: (DEMO / SOURCE)

demo13

webpack 热替换

🔦 示例DEMO13: (SOURCE)

jigsaw

使用说明

  1. 执行以下命令:
npm install
npm run dev
  1. 在浏览器中打开:http://localhost:9000

项目说明

上次内容:

codes/chapter01/jigsaw 的示例中,我们看到了如何使用 React 。

但是,可以看到有许多的不足之处:

  • 直接下载并管理 React 等 JavaScript 库很不方便;
  • React 语法在一些浏览器上无法识别,需要解析器去解析;
  • 如果要启动一个 web app,还需要解决打包、装载等问题。

在学习了 Chapter02 - Node, Npm, YarnChapter03 - Webpack 之后,我们可以解决上述问题了。

本次内容:

让我们来看看 codes/chapter03/jigsaw 示例:

📌 提示:

本示例将 webpackwebpack-dev-serverpackage.json 结合起来,使得项目可以分为两套运行环境:

  • 开发环境(development)
  • 生产环境(production)

package.json 文件中的 dependenciesdevDependencies 属性列举了本项目需要使用的各种 JavaScript 库。你可以轻松通过 NpmYarn 来自动下载对应版本的包。

scripts 属性指定了几条可以运行的命令:

  • npm clean 清除输出文件。
  • npm run dev 用于开发环境,启动一个可以模块热替换,便于调试的 web app 。
  • npm run prod 用于生产环境,编译后,输出一个 dist 目录。其中包含了所有的代码和资源,在浏览器打开其中的 index.html 文件,就可以看到这个静态 app。

下次内容:

也许,你已经留意到在 webpack.config.js 中,使用了 babel-loader 。由于浏览器无法直接识别 React 语法,所以需要使用 Babel 来转义 React 语法为浏览器可以识别的 JavaScript 语法。Chapter04 将介绍这部分内容,并给出示例。

​:flashlight:​ 示例 chapter03-jigsaw: (DEMO / SOURCE)