1_认识webpack
1.1_内置模块path
path模块用于对路径和文件进行处理,提供了很多好用的方法。
在Mac OS、Linux和window上的路径时不一样的
- window上会使用 \或者 \ 来作为文件路径的分隔符,当然目前也支持 /;
- 在Mac OS、Linux的Unix操作系统上使用 / 来作为文件路径的分隔符;
如果在window上使用 \ 来作为分隔符开发了一个应用程序,要部署到Linux上面怎么办?
- 显示路径会出现一些问题;
- 为了屏蔽他们之间的差异,在开发中对于路径的操作可以使用 path 模块;
可移植操作系统接口(英语:Portable Operating System Interface,缩写为POSIX)
- Linux和Mac OS都实现了POSIX接口;
- Window部分电脑实现了POSIX接口;
1.2_path常见的API
从路径中获取信息
- dirname:获取文件的父文件夹;
- basename:获取文件名;
- extname:获取文件扩展名;
const path = require("path")
const filepath = "C://abc/cba/nba.txt"
// 可以从一个路径中获取一些信息
console.log(path.extname(filepath)) //.txt
console.log(path.basename(filepath)) //nba.txt
console.log(path.dirname(filepath)) //C://abc/cba
路径的拼接:path.join
- 如果希望将多个路径进行拼接,但是不同的操作系统可能使用的是不同的分隔符;
- 这个时候可以使用path.join函数;
拼接绝对路径:path.resolve
- path.resolve() 方法会把一个路径或路径片段的序列解析为一个绝对路径;
- 给定的路径的序列是从右往左被处理的,后面每个 path 被依次解析,直到构造完成一个绝对路径;
- 如果在处理完所有给定path的段之后,还没有生成绝对路径,则使用当前工作目录;
- 生成的路径被规范化并删除尾部斜杠,零长度path段被忽略;
- 如果没有path传递段,path.resolve()将返回当前工作目录的绝对路径;
const path1 = "/abc/cba"
const path2 = "../hhh/kobe/james.txt"
console.log(path1 + path2) ///abc/cba../hhh/kobe/james.txt
// 将多个路径拼接在一起: path.join
console.log(path.join(path1, path2)) //\abc\hhh\kobe\james.txt
1.3_认识webpack
事实上随着前端的快速发展,前端的开发已经变的越来越复杂了:
- 比如开发过程中需要通过模块化的方式来开发;
- 比如使用一些高级的特性来加快的开发效率或者安全性,比如通过ES6+、TypeScript开发脚本逻辑,通过sass、less等方式来编写css样式代码;
- 比如开发过程中,还希望实时的监听文件的变化来并且反映到浏览器上,提高开发的效率;
- 比如开发完成后还需要将代码进行压缩、合并以及其他相关的优化等等….
但是对于很多的前端开发者来说,并不需要思考这些问题,日常的开发中根本就没有面临这些问题:
- 这是因为目前前端开发通常都会直接使用三大框架来开发:Vue、React、Angular;
- 但是事实上,这三大框架的创建过程都是借助于脚手架(CLI)的;
- 事实上Vue-CLI、create-react-app、Angular-CLI都是基于webpack来帮助支持模块化、less、TypeScript、打包优化等的;
Vue-CLI、create-react-app、Angular-CLI都脚手架依赖webpack
webpack概念
官方的解释 :webpack is a static module bundler for modern JavaScript applications.
webpack是一个静态的模块化打包工具,为现代的JavaScript应用程序;
详细拆解:
- 打包bundler:webpack可以将帮助进行打包,所以它是一个打包工具
- 静态的static:这样表述的原因是最终可以将代码打包成最终的静态资源(部署到静态服务器);
- 模块化module:webpack默认支持各种模块化开发,ES Module、CommonJS、AMD等;
- 现代的modern:前端说过,正是因为现代前端开发面临各种各样的问题,才催生了webpack的出现和发展;
2_webpack基本打包
2.1_Webpack的使用前提
webpack的官网
Webpack的运行是依赖Node环境的,所以电脑上必须有Node环境
- 先安装Node.js,并且同时会安装npm;
- Node的官网
2.2_Webpack的默认打包
通过webpack进行打包,之后运行打包之后的代码, 在目录下直接执行命令:webpack
生成一个dist文件夹,里面存放一个main.js的文件,就是打包之后的文件:
- 这个文件中的代码被压缩和丑化了;
- 另外发现代码中依然存在ES6的语法,比如箭头函数、const等,这是因为默认情况下webpack并不清楚打包后的文件是否需要转成ES5之前的语法,后续需要通过babel来进行转换和设置;
虽然可以正常进行打包的,但是webpack是如何确定的入口的呢?
- 事实上,当运行webpack时,webpack会查找当前目录下的 src/index.js作为入口;
- 所以,如果当前项目中没有存在src/index.js文件,那么会报错;
当然,也可以通过配置来指定入口和出口
npx webpack --entry ./src/main.js --output-path ./build
2.3_创建局部的webpack
前面直接执行webpack命令使用的是全局的webpack,如果希望使用局部的可以按照下面的步骤来操作。
第一步:创建package.json文件,用于管理项目的信息、库依赖等
npm init
第二步:安装局部的webpack
npm install webpack webpack-cli -D
第三步:使用局部的webpack
npx webpack
第四步:在package.json中创建scripts脚本,执行脚本打包即可
npm run build
"scripts":{
"build": "webpack "
}
3_Webpack配置文件
在通常情况下,webpack需要打包的项目是非常复杂的,并且需要一系列的配置来满足要求,默认配置必然是不可以的。
可以在根目录下创建一个webpack.config.js文件,来作为webpack的配置文件:
继续执行webpack命令,依然可以正常打包 npm run build
指定配置文件
如果配置文件不是webpack.config.js的名字,而是其他的名字呢?
-
比如将webpack.config.js修改成了 wk.config.js;
-
这个时候可以通过 --config 来指定对应的配置文件;
webpack --config wk.config.js
但是每次这样执行命令来对源码进行编译,会非常繁琐,所以可以在package.json中增加一个新的脚本:
指定配置文件
"scripts" : {
"build" : "webpack --config wk .config.js"
}
之后执行 npm run build
来打包即可。
4_编写和打包CSS文件
先看一个案例。创建一个component.js , 通过JavaScript创建了一个元素,并且希望给它设置CSS样式;发现打包出错(模块加载失败)原因与css文件有关,缺少一个合适的Loader
4.1_css-loader的使用
上面的错误信息告诉需要一个loader来加载这个css文件,但是loader是什么呢?
- loader 可以用于对模块的源代码进行转换;
- 将css文件也看成是一个模块,是通过import来加载这个模块的;
- 在加载这个模块时,webpack其实并不知道如何对其进行加载,必须制定对应的loader来完成这个功能;
需要什么样的loader?
- 对于加载css文件来说,需要一个可以读取css文件的loader;
- 这个loader最常用的是css-loader;
css-loader的安装:npm install css-loader -D
4.2_css-loader的使用方案
使用loader加载css文件的三种方式:
- 内联方式;
- CLI方式(webpack5中不再使用);
- 配置方式;、
内联方式:内联方式使用较少,因为不方便管理;
- 在引入的样式前加上使用的loader,并且使用!分割;
CLI方式
- 在webpack5的文档中已经没有了–module-bind;
- 实际应用中也比较少使用,因为不方便管理;
4.3_loader配置方式
配置方式表示的意思是在的webpack.config.js文件中写明配置信息:
- module.rules中允许配置多个loader(因为也会继续使用其他的loader,来完成其他文件的加载);
- 这种方式可以更好的表示loader的配置,也方便后期的维护,同时也让你对各个Loader有一个全局的概览;
module.rules的配置如下:
(1)rules属性对应的值是一个数组:[Rule]
(2) 数组中存放的是一个个的Rule,Rule是一个对象,对象中可以设置多个属性:
- test属性:用于对 resource(资源)进行匹配的,通常会设置成正则表达式;
- use属性:对应的值时一个数组:[UseEntry]。注意UseEntry是一个对象,可以通过对象的属性来设置一些其他属性
- loader:必须有一个 loader属性,对应的值是一个字符串;
- options:可选的属性,值是一个字符串或者对象,值会被传入到loader中;
- query:目前已经使用options来替代;
- 传递字符串(如:use: [ ‘style-loader’ ])是 loader 属性的简写方式(如:use: [ { loader: ‘style-loader’} ]);
- loader属性: Rule.use: [ { loader } ] 的简写
const path = require("path")
module.exports = {
entry: "./src/main.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "./build")
},
module: {
rules: [
{
test: /\.css$/, // 正则表达式:告诉webpack匹配什么文件
use: [ // use中多个loader的使用顺序是从后往前
{ loader: "style-loader" },
{ loader: "css-loader" }
]
}
}
4.4_style-loader
虽然可以通过css-loader来加载css文件, 但是css在代码中并没有实际生效(页面没有效果)。
这是为什么呢?
- 因为css-loader只是负责将.css文件进行解析,并不会将解析之后的css插入到页面中;
- 如果希望再完成插入style的操作,那么还需要另外一个loader,就是style-loader;
安装style-loader:npm install style-loader -D
配置style-loader
如何使用style-loader:
- 在配置文件中,添加style-loader;
- 注意:因为loader的执行顺序是从右向左(或者说从下到上,或者说从后到前的),所以需要将style-loader写到css-loader的前面;
重新执行编译npm run build,可以发现打包后的css已经生效了:
- 当前目前的css是通过页内样式的方式添加进来的;
- 后续也会讲如何将css抽取到单独的文件中,并且进行压缩等操作;
5_编写和打包LESS文件
5.1_引入
在开发中,可能会使用less、sass、stylus的预处理器来编写css样式,效率会更高。
如何让环境支持这些预处理器呢?
首先需要确定,less、sass等编写的css需要通过工具转换成普通的css;
比如编写如下的less样式
title.less
@fontSize: 50px;
@fontColor: blue;
.title {
font-size: @fontSize;
color: @fontColor;
user-select: none;
}
5.2_Less工具处理
输入终端命令 : npm install less -D
结合上面的案例,再输入终端命令
npx lessc ./src/css/title.less title.css
5.3_less-loader处理
是在项目中会编写大量的css,它们如何可以自动转换? 这时可以使用less-loader,来自动使用less工具转换less到css;
npm install less-loader -D
配置webpack.config.js
module: {
rules: [
{
test: /\.less$/, // 正则表达式:告诉webpack匹配什么文件
use: [ // use中多个loader的使用顺序是从后往前
{ loader: "style-loader" },
{ loader: "css-loader" },
{ loader: "less-loader" }
]
}
执行npm run build ,less就可以自动转换成css,并且页面也会生效了
6_postcss工具处理CSS
6.1_认识PostCSS工具
什么是PostCSS呢?
- PostCSS是一个通过JavaScript来转换样式的工具;
- 这个工具可以帮助进行一些CSS的转换和适配,比如自动添加浏览器前缀、css样式的重置;
- 但是实现这些功能,需要借助于PostCSS对应的插件;
如何使用PostCSS呢?主要就是两个步骤:
- 第一步:查找PostCSS在构建工具中的扩展,比如webpack中的postcss-loader;
- 第二步:选择可以添加你需要的PostCSS相关的插件;
6.2_postcss-loader
可以借助于构建工具: 在webpack中使用postcss就是使用postcss-loader来处理的;
安装postcss-loader:npm install postcss-loader -D
修改加载css的loader:(配置文件已经过多,给出一部分了)
注意:因为postcss需要有对应的插件才会起效果,所以需要配置它的plugin;
module: {
rules: [
{
test: /\.css$/, // 正则表达式:告诉webpack匹配什么文件
use: [ // use中多个loader的使用顺序是从后往前
{ loader: "style-loader" },
{ loader: "css-loader" }
],
// 简写一: 如果loader只有一个
// loader: "css-loader"
// 简写二: 多个loader不需要其他属性时, 可以直接写loader字符串形式
use: [
"style-loader",
"css-loader",
"postcss-loader"
// { //此处注释的内容,按照相同的作用迁移到postcss.config.js
// loader: "postcss-loader",
// options: {
// postcssOptions: {
// plugins: [
// "autoprefixer"
// ]
// }
// }
// }
]
},
{
test: /\.less$/,
use: [ "style-loader", "css-loader", "less-loader", "postcss-loader" ]
}
]
}
6.3_单独的postcss配置文件
若要添加前缀,需安装autoprefixer:npm install autoprefixer -D
可以将这些配置信息放到一个单独的文件中进行管理:在根目录下创建postcss.config.js
module.exports = {
plugins: [
"autoprefixer"
]
}
6.5_postcss-preset-env
事实上,在配置postcss-loader时,配置插件并不需要使用autoprefixer。 可以使用另外一个插件:postcss-preset-env
- postcss-preset-env也是一个postcss的插件;
- 它可以帮助将一些现代的CSS特性,转成大多数浏览器认识的CSS,并且会根据目标浏览器或者运行时环境添加所需的polyfill;
- 也包括会自动帮助添加autoprefixer(所以相当于已经内置了autoprefixer);
首先,需要安装postcss-preset-env:npm install postcss-preset-env -D
之后,直接修改掉之前的autoprefixer即可:
postcss.config.js
module.exports = {
plugins: [
"postcss-preset-env"
]
}
注意:在使用某些postcss插件时,也可以直接传入字符串
ss-loader时,配置插件并不需要使用autoprefixer。 可以使用另外一个插件:postcss-preset-env
- postcss-preset-env也是一个postcss的插件;
- 它可以帮助将一些现代的CSS特性,转成大多数浏览器认识的CSS,并且会根据目标浏览器或者运行时环境添加所需的polyfill;
- 也包括会自动帮助添加autoprefixer(所以相当于已经内置了autoprefixer);
首先,需要安装postcss-preset-env:npm install postcss-preset-env -D
之后,直接修改掉之前的autoprefixer即可:
postcss.config.js
module.exports = {
plugins: [
"postcss-preset-env"
]
}
注意:在使用某些postcss插件时,也可以直接传入字符串