本帖最后由 上海分校-小影 于 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(加载器),尽请期待。
|