A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 懒,羊羊 中级黑马   /  2018-5-11 11:00  /  1927 人查看  /  3 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

本帖最后由 上海分校-小影 于 2018-5-11 14:37 编辑

什么是webpack?

- [webpack 官网](http://webpack.github.io/)

概念:
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。

简单来说就是一下两点:
1 webpack 将带有依赖项的各个模块打包处理后,变成了独立的浏览器能够识别的文件
2 webpack 合并以及解析带有依赖项的模块

概述
- webpack的两个特点:1 模块化 2 打包
> webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)  
> webpack 是一个**模块化方案(预编译)**  
> webpack获取具有依赖关系的模块,并生成表示这些模块的静态资源

- 四个核心概念:**入口(entry)**、**输出(output)**、**加载器loader**、**插件(plugins)**

模块化方案简介

模块化方案: webpack 和 requirejs(通过编写代码的方式将前端的功能,划分成独立的模块)

webpack 预编译 (在开发阶段通过webpack进行模块化处理, 最终项目上线, 就不在依赖于 webpack)
requirejs 线上的编译( 代码运行是需要依赖与 requirejs 的 )

webpack起源

- webpack解决了现存模块打包器的两个痛点:
  - 1 **Code Spliting** - 代码分离
  - 2 **静态资源的模块化处理方案**

webpack与模块

- 在webpack看来:所有的**静态资源都是模块**
- webpack 模块能够识别以下等形式的模块之间的依赖:

- JS的模块化规范:
  - ES2015 `import` `export`
  - CommonJS `require()` `module.exports`
  - AMD `define` 和 `require`

- 非JS等静态资源:
  - css/sass/less 文件中的 `@import`
  - 图片连接,比如:样式 `url(...)` 或 HTML `<img src=...>`
  - 字体 等

如何使用webpack?
安装webpack

- 全局安装:`npm i -g webpack`
  - 目的:在任何目录中通过CLI使用 `webpack` 这个命令
- 项目安装:`npm i -D webpack`
  - 目的:执行当前项目的构建

webpack的基本使用

- 安装:`npm i -D webpack`
- webpack的两种使用方式:1 命令行 2 配置文件(`webpack.config.js`)

命令行方式演示 - 案例:隔行变色

- 1 使用`npm init -y` 初始package.json,使用npm来管理项目中的包
- 2 新建`index.html`和`main.js`,实现隔行变色功能
- 3 运行`webpack src/js/main.js dist/bundle.js`进行打包构建,语法是:`webpack 入口文件 输出文件`
- 4 注意:需要在页面中引入 输出文件 的路径(此步骤可通过配置webpack去掉)

[JavaScript] 纯文本查看 复制代码
/*
  src/js/index.js
*/
// 1 导入 jQuery

import $ from 'jquery'

// 2 获取页面中的li元素

const $lis = $('#ulList').find('li')

// 3 隔行变色

// jQuery中的 filter() 方法用来过滤jquery对象

$lis.filter(':odd').css('background-color', '#def')

$lis.filter(':even').css('background-color', 'skyblue')



配置文件方式(推荐)

[JavaScript] 纯文本查看 复制代码
/*

  webpack.config.js

  运行命令:webpack

  entry 入口的配置说明:

  [url=https://doc.webpack-china.org/concepts/entry-points]https://doc.webpack-china.org/concepts/entry-points[/url]

*/

var path = require('path')

module.exports = {

  // 入口文件

  entry: path.join(__dirname, 'src/js/index.js'),

  // 输出文件

  output: {

    path: path.join(__dirname, './dist'),   // 输出文件的路径

    filename: 'bundle.js'                 // 输出文件的名称

  }

}


webpack-dev-server

- 安装:`npm i -D webpack-dev-server`
- 作用:配合webpack,创建开发环境(启动服务器、监视文件变化、自动编译、刷新浏览器等),提高开发效率
- 注意:无法直接在终端中执行 `webpack-dev-server`,需要通过 `package.json` 的 `scripts` 实现
- 使用方式:`npm run dev`

[JavaScript] 纯文本查看 复制代码
"scripts": {

  "dev": "webpack-dev-server"

}


使用说明

- 注意:`webpack-dev-server`将打包好的文件存储在内存中,提高编译和加载速度,效率更高
- 注意:输出的文件被放到项目根目录中
  - 命令行中的提示:`webpack output is served from /`
  - 在`index.html`页面中直接通过 `/bundle.js` 来引入内存中的文件

配置说明 - CLI配置

- `--contentBase` :告诉服务器在哪个目录中提供服务(可以理解为:打开哪个目录中的index.html)
  - `--contentBase ./`:当前工作目录
  - `--contentBase ./src`:当前目录下的src文件夹
- `--open` :自动打开浏览器
- `--port` :端口号
- `--hot` :热更新,只加载修改的文件(按需加载修改的内容),而非全部加载

[JavaScript] 纯文本查看 复制代码
/* package.json */

/* 运行命令:npm run dev */

{

  "scripts": {

    "dev": "webpack-dev-server --contentBase ./src --open --port 8888 --hot"

  }

}


配置说明 - webpack.config.js

[JavaScript] 纯文本查看 复制代码
const webpack = require('webpack')

devServer: {

  // 服务器的根目录 Tell the server where to serve content from

  // [url=https://webpack.js.org/configuration/dev-server/#devserver-contentbase]https://webpack.js.org/configura ... vserver-contentbase[/url]

  contentBase: path.join(__dirname, './'),

  // 自动打开浏览器

  open: true,

  // 端口号

  port: 8888,

  // --------------- 1 热更新 -----------------

  hot: true

},

plugins: [

  // ---------------- 2 启用热更新插件 ----------------

  new webpack.HotModuleReplacementPlugin()

]


html-webpack-plugin 插件

- 安装:`npm i -D html-webpack-plugin`
- 作用:根据模板,自动生成html页面
- 优势:页面存储在内存中,自动引入`bundle.js`、`css`等文件

[JavaScript] 纯文本查看 复制代码
/* webpack.config.js */

const htmlWebpackPlugin = require('html-webpack-plugin')

// ...

plugins: [

  new htmlWebpackPlugin({

    // 模板页面路径

    template: path.join(__dirname, './index.html'),

    // 在内存中生成页面路径,默认值为:index.html

    filename: 'index.html'

  })

]

本贴简单的介绍了webpack,以及entry(入口),output(输出),plugins(插件)3个核心概念。后面会单独发一篇帖子介绍另一个核心概念loader(加载器),尽请期待。



3 个回复

倒序浏览
奈斯
回复 使用道具 举报
回复 使用道具 举报
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马