本帖最后由 上海分校-小影 于 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(加载器)，尽请期待。
| 
收藏
淘帖
踩
奈斯
