第 1 章:webpack 简介
1.1 webpack 是什么
webpack 是一种前端资源构建工具,一个静态模块打包器(module bundler)。
在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。
它将根据模块的依赖关系进行静态分析,打包生成对应的静态资源(bundle)。
构建工具解析:
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack简介</title>
<link rel="stylesheet" href="./index.less">
</head>
<body>
<h1 id="title">hello webpack</h1>
<script src="./index.js"></script>
</body>
</html>
index.js
// 引入js资源
import $ from 'jquery';
// 引入样式资源
import './index.less';
// 引入图片、字体等其他资源
$('#title').click(() => {
$('body').css('backgroundColor', 'deeppink');
})
index.less
body,
html {
margin: 0;
padding: 0;
height: 100%;
background-color: pink;
#title {
color: #fff;
}
}
在安装node的前提下执行:
npm init // 输入报名,生成package.json
npm i jquery // 下载安装 jquery 在生成的node_modules文件夹下,于index.js中引入
浏览器打开index.html文件时
1. 报错:Cannot use import statement outside a module
原因:ES6的模块化语法 import $ from 'jquery'; 浏览器无法识别;
需要工具将ES6转换为ES5后编译
2. less中样式无法生效
原因: 浏览器无法解析less预处理样式文件;
需借助工具将less编译成css
构建工具就是整合前端需要的一系列的工具,一次性执行工具的作用;
静态模块打包器解析:
webpack通过入口文件将静态模块文件引入,形成chunk块,通过打包,输出bundle静态资源,最终可以在浏览器中运行;
1.2 webpack 五个核心概念
1.2.1 Entry
入口(Entry)指示 webpack 以哪个文件为入口起点开始打包,分析构建内部依赖图。
1.2.2 Output 输出
(Output)指示 webpack 打包后的资源 bundles 输出到哪里去,以及如何命名。
1.2.3 Loader
Loader让 webpack 能 够 去 处 理 那 些 非 JavaScript 文 件
(webpack 自 身 只 理 解 JavaScript) ,
相当于将img/less等非js文件翻译成webpack能识别的文件
1.2.4 Plugins
插件(Plugins)可以用于执行范围更广的任务。
插件的范围包括,从打包优化和压缩, 一直到重新定义环境中的变量等。
1.2.5 Mode
模式(Mode)指示 webpack 使用相应模式的配置。