path模块用于对路径和文件进行处理
,提供了很多好用的方法。
我们知道在Mac OS、Linux和window上的路径时不一样的
使用 \
或者 \\
来作为文件路径的分隔符,当然目前也支持 /
;/
来作为文件路径的分隔符;那么如果我们在window上使用 \
来作为分隔符开发了一个应用程序,要部署到Linux上面应该怎么办呢?
显示路径
会出现一些问题;path 模块
;可移植操作系统接口(英语:Portable Operating System Interface,缩写为POSIX)
从路径中获取信息
路径的拼接:path.join
多个路径进行拼接
,但是不同的操作系统可能使用的是不同的分隔符;path.join
函数;拼接绝对路径:path.resolve
绝对路径
;const path = require("path")
const filepath = "C://abc/cba/nba.txt"
// 1.可以从一个路径中获取一些信息
console.log(path.extname(filepath))
console.log(path.basename(filepath))
console.log(path.dirname(filepath))
const path1 = "/abc/cba"
const path2 = "../why/kobe/james.txt"
// console.log(path1 + path2)
// 2.将多个路径拼接在一起: path.join
// console.log(path.join(path1, path2))
事实上随着前端的快速发展,目前前端的开发已经变的越来越复杂了:
模块化
的方式来开发;开发效率
或者安全性
,比如通过ES6+
、TypeScript开发脚本逻辑,sass
、less
等方式来编写css样式代码;实时的监听文件的变化
来并且反映到浏览器上,提高开发的效率;压缩
、合并
以及其他相关的优化;但是对于很多的前端开发者来说,并不需要思考这些问题,日常的开发中根本就没有面临这些问题:
Vue
、React
、Angular
;脚手架
(CLI)的;Vue-CLI
、create-react-app
、Angular-CLI
都是基于webpack来帮助我们支持模块化、less、TypeScript、打包优化等的;事实上我们上面提到的所有脚手架
都是依赖于webpack的:
我们先来看一下官方的解释:
webpack is a
static module bundler
formodern
JavaScript applications.
webpack是一个静态的模块化打包工具
,为现代的JavaScript应用程序;
我们来对上面的解释进行拆解:
静态资源
(部署到静态服务器);JavaScript的打包:
Css的处理:
资源文件img、font:
HTML资源的处理:
处理vue项目的SFC文件.vue文件;
webpack的官方文档是https://webpack.js.org/
Webpack的运行是依赖Node环境
的,所以我们电脑上必须有Node环境
webpack的安装目前分为两个:webpack
、webpack-cli
那么它们是什么关系呢?
node_modules
下的.bin目录下的webpack;webpack-cli
的,如果没有安装就会报错;编译
和打包
的过程;npm install webpack webpack-cli –g # 全局安装
npm install webpack webpack-cli –D # 局部安装
我们可以通过webpack进行打包,之后运行打包之后的代码
webpack
命令生成一个dist
文件夹,里面存放一个main.js的文件,就是我们打包之后的文件:
被压缩
和丑化
了;babel
来进行转换和设置;我们发现是可以正常进行打包的,但是有一个问题,webpack是如何确定我们的入口的呢?
当然,我们也可以通过配置来指定入口和出口
npx webpack --entry ./src/main.js --output-path ./build
前面我们直接执行webpack命令使用的是全局的webpack,如果希望使用局部的可以按照下面的步骤来操作。
第一步:创建package.json文件,用于管理项目的信息、库依赖等
npm init
第二步:安装局部的webpack
npm install webpack
第三步:使用局部的webpack
npx webpack
第四步:在package.json中创建scripts脚本,执行脚本打包即可
{
"scripts": {
"build": "webpack"
}
}
npm run build
在通常情况下,webpack需要打包的项目是非常复杂的,并且我们需要一系列的配置来满足要求,默认配置必然是不可以的。
我们可以在根目录下创建一个webpack.config.js
文件,来作为webpack的配置文件:
// webpack.config.js
const path = require('path');
// 导出配置信息
module.exports = {
entry: "./src/main.js",
output: {
// 指定文件入口
filename: "bundle.js",
path: path.resolve(__dirname, "./dist")
}
}
继续执行webpack命令,依然可以正常打包
但是如果我们的配置文件并不是webpack.config.js的名字,而是其他的名字呢?
--config
来指定对应的配置文件
;webpack --config wk.config.js
但是每次这样执行命令来对源码进行编译,会非常繁琐,所以我们可以在package.json中增加一个新的脚本:
{
"scripts": {
"build": "webpack --config wk.config.js"
}
}
webpack到底是如何对我们的项目进行打包的呢?
命令
或者配置文件
找到入口文件
;依赖关系图
,这个依赖关系图会包含应用程序中所需的所有模块(比如.js文件、css文件、图片、字体等);我们创建一个component.js
import './css/foo.css'
function component() {
const element = document.createElement("div")
element.innerText = "吃饭睡觉大豆豆"
element.className = "content"
return element
}
document.body.appendChild(component())
.content {
color: #f00;
}
上面的错误信息告诉我们需要一个loader来加载这个css文件,但是loader是什么呢?
对模块的源代码进行转换
;指定对应的loader
来完成这个功能;那么我们需要一个什么样的loader呢?
css-loader
;css-loader的安装:
npm install css-loader -D
如何使用这个loader来加载css文件呢?有三种方式:
内联方式:内联方式使用较少
,因为不方便管理;
!
分割;import 'css-loader!../css/style.css'
CLI方式
--module-bind
;配置方式表示的意思是在我们的webpack.config.js
文件中写明配置信息:
module.rules
中允许我们配置多个loader(因为我们也会继续使用其他的loader,来完成其他文件的加载);module.rules的配置如下:
rules
属性对应的值是一个数组:[Rule]
数组中存放的是一个个的Rule,Rule是一个对象,对象中可以设置多个属性:
loader
:必须有一个 loader属性,对应的值是一个字符串;options
:可选的属性,值是一个字符串或者对象,值会被传入到loader中;query
:目前已经使用options来替代;const path = require("path")
module.exports = {
entry: "./src/main.js",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "./build")
},
module: {
rules: [
{
// 告诉webpack匹配什么文件
test: /\.css$/,
// use: [ // use中多个loader的使用顺序是从后往前
// { loader: "style-loader" },
// { loader: "css-loader" }
// ],
// 简写一: 如果loader只有一个
// loader: "css-loader"
// 简写二: 多个loader不需要其他属性时, 可以直接写loader字符串形式
use: [
"style-loader",
"css-loader",
"postcss-loader"
// {
// loader: "postcss-loader",
// options: {
// postcssOptions: {
// plugins: [
// "autoprefixer"
// ]
// }
// }
// }
]
},
{
test: /\.less$/,
use: [ "style-loader", "css-loader", "less-loader", "postcss-loader" ]
}
]
}
}
我们已经可以通过css-loader来加载css文件了
没有生效
(页面没有效果)。这是为什么呢?
.css
文件进行解析,并不会将解析之后的css插入到页面中;插入style
的操作,那么我们还需要另外一个loader,就是style-loader
;安装style-loader:
npm install style-loader -D
那么我们应该如何使用style-loader:
从右向左
(或者说从下到上
,或者说从后到前的),所以我们需要将style-loader写到css-loader的前面;{
use: [
{
loader: "style-loader"
},
{
loader: "css-loader"
}
]
}
重新执行编译npm run build
,可以发现打包后的css已经生效了:
页内样式
的方式添加进来的;将css抽取到单独的文件
中,并且进行压缩
等操作;在我们开发中,我们可能会使用less
、sass
、stylus
的预处理器来编写css样式,效率会更高。
那么,如何可以让我们的环境支持这些预处理器呢?
比如我们编写如下的less样式:
@fontSize: 30px;
@fontWeight: 700;
.content {
font-size: @fontSize;
font-weight: @fontWeight;
}
我们可以使用less工具来完成它的编译转换:
npm install less -D
执行如下命令:
npx lessc ./src/css/title.less title.css
但是在项目中我们会编写大量的css,它们如何可以自动转换
呢?
npm install less-loader -D
配置webpack.config.js
{
test: /\.less$/,
use: [
"style-loader",
"css-loader",
"less-loader"
]
}
执行npm run build,less就可以自动转换成css,并且页面也会生效了
什么是PostCSS呢?
如何使用PostCSS呢?主要就是两个步骤:
我们可以借助于构建工具:
我们来安装postcss-loader:
npm install postcss-loader -D
我们修改加载css的loader:(配置文件已经过多,给出一部分了)
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: [
require('autoprefixer')
]
}
}
}
因为我们需要添加前缀
,所以要安装autoprefixer
:
我们可以将这些配置信息放到一个单独的文件中进行管理:
postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')
]
}
事实上,在配置postcss-loader时,我们配置插件并不需要使用autoprefixer。
我们可以使用另外一个插件:postcss-preset-env
polyfill
;首先,我们需要安装postcss-preset-env:
npm install postcss-preset-env -D
之后,我们直接修改掉之前的autoprefixer即可:
plugins: [
require('postcss-preset-env')
]
注意:我们在使用某些postcss插件时,也可以直接传入字符串
module.exports = {
plugins: [
"postcss-preset-env",
]
}