第一节：Webpack简介、安装-配置-打包、常用loader的使用(css/style/less/postcss-loader)
一. 简介
1. Webpack背景
(1). 事实上随着前端的快速发展，目前前端的开发已经变的越来越复杂了：
A. 比如开发过程中我们需要通过模块化的方式来开发；
B. 比如也会使用一些高级的特性来加快我们的开发效率或者安全性，比如通过ES6+、TypeScript开发脚本逻辑， 通过sass、less等方式来编写css样式代码；
C. 比如开发过程中，我们还希望实时的监听文件的变化来并且反映到浏览器上，提高开发的效率；
D. 比如开发完成后我们还需要将代码进行压缩、合并以及其他相关的优化；
(2). 但是对于很多的前端开发者来说，并不需要思考这些问题，日常的开发中根本就没有面临这些问题：
A. 这是因为目前前端开发我们通常都会直接使用三大框架来开发：Vue、React、Angular；
B. 但是事实上，这三大框架的创建过程我们都是借助于脚手架（CLI）的；
C. 事实上Vue-CLI、create-react-app、Angular-CLI都是基于webpack来帮助我们支持模块化、less、TypeScript、打包优化等的；
2. Webpack是什么？
官方解释：webpack is a static module bundler for modern JavaScript applications. （ webpack是一个静态的模块化打包工具，为现代的JavaScript应用程序；）
PS：
- 打包bundler：webpack可以将帮助我们进行打包，所以它是一个打包工具
- 静态的static：这样表述的原因是我们最终可以将代码打包成最终的静态资源（部署到静态服务器）；
- 模块化module：webpack默认支持各种模块化开发，ES Module、CommonJS、AMD等；
- 现代的modern：我们前端说过，正是因为现代前端开发面临各种各样的问题，才催生了webpack的出现和发展；
官网地址：https://webpack.docschina.org/ （中文版）
https://webpack.js.org/ (英文版)
3. 使用Webpack的前提
需要安装nodejs，安装步骤详见：https://www.cnblogs.com/yaopengfei/p/14478126.html
该系列使用的node版本和npm版本如下：
4. 全局安装和默认打包
(PS：这里主要是为了进行快速入门，进行全局安装和简单的打包，在实际开发中，很少这么用，都是局部安装，项目不同，可能安装的webpack版本也不同)
说明：
(1). 全局安装webpack，指令和版本如下
【npm install webpack webpack-cli -g】
(2). 新建1个工程，在src/js文件夹下，新建t1.js 和 t2.js
t1.js 是commonjs的写法，代码如下
// 下面是commonjs的写法 const getPrice=function(){ return "$100"; } // 对外导出 module.exports={ getPrice }
t2.js 是 ES6 Module的写法，代码如下
// 下面是 ES6 的写法 export function sum(num1,num2){ return num1+num2; }
(3). 在src目录下新建index.js文件，然后导入t1.js 和 t2.js
// commonjs的导入 const {getPrice}=require('./js/t1'); // ES6的导入 import {sum} from './js/t2.js'; // 调用 console.log(getPrice()); console.log(sum(10,20));
(4). 运行下面指令进行打包
【webpack】
当我们运行webpack时，webpack会查找当前目录下的 src/index.js作为入口；然后在dist文件夹下生成main.js打包后的文件，这就是默认规范 (如果当前项目中没有存在src/index.js文件，那么会报错)。
PS：也可以指定入口文件，指定打包后的文件名和存放路径。
【 npx webpack --entry ./src/index.js --output-path ./build】
(5). 引入打包后的文件，进行运行。
<body> <div>测试打包问题</div> <!-- 报错 --> <!-- <script src="src/index.js" ></script> --> <!-- 调用打包后的文件 --> <script src="dist/main.js" ></script> </body>
二. 局部安装和配置打包
1. 局部安装和默认打包
(1). 准备基础项目
src/js下的t1.js 、t2.js； src下的index.js
(2). 运行指令【npm init -y】初始化项目
(3). 运行下面指令，进行webpack的局部安装(且开发依赖)
【npm install webpack webpack-cli -D】
生成的package.json文件如下：
{
"name": "01_webpack_localBundle",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.52.1",
"webpack-cli": "^4.8.0"
}
}
(4). 运行指令【npx webpack】进行打包
(或者将package.json中scripts标签进行如下改变，然后运行指令【npm run build】进行打包)
"scripts": {
"build": "webpack"
},
同样会在dist文件夹下生成1个main.js文件，调用即可。
2. 通过配置文件打包（推荐）
(1). 新建 webpack.config.js 配置文件（默认名称就叫这个，不建议改）
指定入口文件、打包后的存放路径、打包后的文件
// 这里必须通过 commonjs的写法配置，不能写 ES6的写法 const path = require('path'); module.exports = { entry: "./src/main.js", //入口文件 output: { path: path.resolve(__dirname, "./build"), //打包后存放路径, 必须写绝对路径 filename: "bundle.js" //打包后的文件名称 } }
(2). 运行指令【npm run build】，则会在build文件夹下生成一个 bundle.js文件，进行调用即可。
PS： webpack.config.js这么默认文件名也可以改，但需要修改下面代码（不建议改！！）
三. 常用loader
1. 什么是loader？
[常用loader详见官方文档：https://webpack.docschina.org/loaders/]
(1). webpack在处理应用程序时，它会根据命令或者配置文件找到入口文件；
从入口开始，会生成一个 依赖关系图，这个依赖关系图会包含应用程序中所需的所有模块（比如.js文件、css文件、图片、字体等）；
然后遍历图结构，打包一个个模块（根据文件的不同使用不同的loader来解析）；
(2). loader 可以用于对模块的源代码进行转换；在加载这个模块时，webpack其实并不知道如何对其进行加载，我们必须制定对应的loader来完成这个功能；
比如：对于加载css文件来说，我们需要一个可以读取css文件的loader；这个loader最常用的是css-loader；
2. loader的配置方式
3. css-loader 和 style-loader
(1). 作用
css-loader用于加载解析css文件，并不会将解析之后的css插入到页面中，
style-loader用于将css插入<style>标签的操作，所以这两个loader通常是一块使用。
(2). 实战配置
A. 准备代码
style.css样式文件
.title{ font-size: 20px; background-color: antiquewhite; font-weight: bold; color: blue; }
ceateHtml.js 文件
import "../css/style.css"; const divEl = document.createElement("div"); divEl.className = "title"; divEl.innerHTML = "Hello，ypf"; document.body.appendChild(divEl);
createHtml.js文件需要导入到入口文件main.js中。
B. 安装两个loader
【npm install css-loader -D】
【npm install style-loader -D】
C. 进行配置，webpack.config.js文件如下
// 这里必须通过 commonjs的写法配置，不能写 ES6的写法 const path = require('path'); module.exports = { entry: "./src/main.js", //入口文件 output: { path: path.resolve(__dirname, "./build"), //打包后存放路径, 必须写绝对路径 filename: "bundle.js" //打包后的文件名称 }, module: { rules: [{ test: /\.css$/, //（表示所有的css结尾的文件都进行匹配） use: [ // 此处的执行顺序是由下往上（下面写法是简化写法） "style-loader", "css-loader" ] }] } }
也可以完整写法：
module: { rules: [{ test: /\.css$/, //（表示所有的css结尾的文件都进行匹配） use: [ // 完整写法，执行顺序是由下往上 { loader: "style-loader" }, { loader: "css-loader" } ] }] }
D. 打包并测试
运行指令【npm run build】，运行结果如下：
4. less-loader
(1). 作用
将less文件转换成css文件，通常需要配合css-loader、style-loader一起使用
(2). 实战配置
A. 准备代码
title.less
@textDecoration: underline; .title { text-decoration: @textDecoration; }
需要将title.less导入对应的js文件中
B. 安装loader
【npm install less -D】
【npm install less-loader -D】
注：less-loader依赖less，所有需要先安装less。
C. 进行配置 webpack.config.js， 代码如下：
module: {
rules: [{
test: /\.css$/, //（表示所有的css结尾的文件都进行匹配）
use: [
// 完整写法，执行顺序是由下往上
{ loader: "style-loader" },
{ loader: "css-loader" }
]
},
{
test: /\.less$/, //（表示所有的less结尾的文件都进行匹配）
use: [
// 简化写法，执行顺序是由下往上
"style-loader",
"css-loader",
"less-loader"
]
}
]
}
D. 打包测试
【npm run build】
补充：上面的less组件可以直接把less文件转换成css文件，指令如下：
【npx lessc ./src/css/title.less title.css】
5. postcss-loader 和 插件autoprefixer
(1). 作用
postcss-loader：我们进行一些CSS的转换和适配，比如自动添加浏览器前缀、css样式的重置
autoprefixer：用于添加前缀
(2). 实战
A. 安装loader
【npm install postcss postcss-cli -D】
【npm install autoprefixer -D】
【npm install postcss-loader -D】
B. 进行配置
module: {
rules: [
{
test: /\.css$/, //（表示所有的css结尾的文件都进行匹配）
use: [
"style-loader",
"css-loader",
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
require("autoprefixer")
]
}
}
}
]
}
]
},
C. 打包测试
【npm run build】
6. 补充：命令行使用postcss 和 postcss-preset-env
【npm install postcss postcss-cli -D】
【npm install autoprefixer -D】
【npx postcss --use autoprefixer -o end.css ./src/css/style.css】
【npm install postcss-preset-env -D】
postcss-preset-env：postcss-preset-env也是一个postcss的插件；帮助我们将一些现代的CSS特性，转成大多数浏览器认识的CSS，并且会根据目标浏览器或者运行时环境添加所需的polyfill，也包括会自动帮助我们添加autoprefixer（所以相当于已经内置了autoprefixer）；
!
- 作 者 : Yaopengfei(姚鹏飞)
- 博客地址 : http://www.cnblogs.com/yaopengfei/
- 声 明1 : 如有错误，欢迎讨论，请勿谩骂^_^。
- 声 明2 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址，否则保留追究法律责任的权利。
