前端工程化-认识webpack工具-webpack的配置方法

文章目录

认识webpack工具

node内置模块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接口；

path常见的API

从路径中获取信息

dirname：获取文件的父文件夹；
basename：获取文件名；
extname：获取文件后缀名(扩展名)；

// 导入内置模块path
const path = require("path")

// 自定义一个路径
const filepath = "C://aaa/bbb/abc.txt"

// 从路径中获取信息
console.log(path.dirname(filepath)) // C://aaa/bbb
console.log(path.basename(filepath)) // abc.txt
console.log(path.extname(filepath)) // .txt

路径的拼接：path.join

如果我们希望将多个路径进行拼接，但是不同的操作系统可能使用的是不同的分隔符；
这个时候我们可以使用path.join函数；

// 导入内置模块path
const path = require("path")

const path1 = "/aaa/bbb"
const path2 = "../name/age/height.txt"

console.log(path.join(path1, path2)) // \aaa\name\age\height.txt

拼接绝对路径：path.resolve

path.resolve() 方法会把一个路径或路径片段的序列解析为一个路径, 且这个路径一定是绝对路径；
给定的路径的序列是从右往左被处理的，后面每个 path 被依次解析，直到构造完成一个绝对路径；

// 导入内置模块path
const path = require("path")

// 形成绝对路径就会停止解析, 返回这个绝对路径
console.log(path.resolve("./aaa", "/bbb", "./ccc.txt")) // E:\bbb\ccc.txt

如果在处理完所有给定path的段之后，还没有生成绝对路径，则使用当前工作目录；

// 导入内置模块path
const path = require("path")

// 处理完没有形成绝对路径, 那么则使用当前目录
console.log(path.resolve("./aaa", "./bbb", "./ccc.txt")) 
// 打印结果 E:\代码\05_Node.js\Node.js基础知识\aaa\bbb\ccc.txt

生成的路径被规范化并删除尾部斜杠，零长度path段被忽略；

// 导入内置模块path
const path = require("path")

// ./ccc.txt/尾部多一个斜杠, 生成后会删除
// 零长度的path会被忽略
console.log(path.resolve("/aaa","" , "./ccc.txt")) // E:\aaa\ccc.txt

如果没有path传递段，path.resolve()将返回当前工作目录的绝对路径；

// 导入内置模块path
const path = require("path")

// 没有path传递段，path.resolve()将返回当前工作目录的绝对路径
console.log(path.resolve()) // E:\代码\05_Node.js\Node.js基础知识

在webpack中的使用

在webpack中某些场景要求传入绝对路径, 这个时候我们就可以通过path.resolve()方法生成绝对路径

认识webpack

事实上随着前端的快速发展，目前前端的开发已经变的越来越复杂了：

比如开发过程中我们需要通过模块化的方式来开发；
比如也会使用一些高级的特性来加快我们的开发效率或者安全性，比如通过ES6+、TypeScript开发脚本逻辑，通过sass、less等方式来编写css样式代码；
比如开发过程中，我们还希望实时的监听文件的变化来并且反映到浏览器上，提高开发的效率；
比如开发完成后我们还需要将代码进行压缩、合并以及其他相关的优化；
等等….

但是对于很多的前端开发者来说，并不需要思考这些问题，日常的开发中根本就没有面临这些问题：

这是因为目前前端开发我们通常都会直接使用三大框架来开发：Vue、React、Angular；
但是事实上，这三大框架的创建过程我们都是借助于脚手架（CLI）的；
事实上Vue-CLI、create-react-app、Angular-CLI都是基于webpack来帮助我们支持模块化、less、TypeScript、打包优化等的；

事实上我们上面提到的所有脚手架都是依赖于webpack的：

Webpack作用

那么webpack到底是什么, 它能做什么? 我们先来看一下官方的解释：

官方上的意思是说: webpack是一个静态的模块化打包工具，为现代的JavaScript应用程序；

我们来对上面的解释进行解读：

打包bundler：webpack可以将帮助我们进行打包，所以它是一个打包工具
静态的static：这样表述的原因是我们最终可以将代码打包成最终的静态资源（部署到静态服务器）；
模块化module：webpack默认支持各种模块化开发，ES Module、CommonJS、AMD等；
现代的modern：我们前端说过，正是因为现代前端开发面临各种各样的问题，才催生了webpack的出现和发展；

Vue项目加载的文件

在Vue项目中加载的文件有哪些呢?

JavaScript的打包：

将ES6转换成ES5的语法；
TypeScript的处理，将其转换成JavaScript；

Css的处理：

CSS文件模块的加载、提取；
Less、Sass等预处理器的处理；

资源文件img、font：

图片img文件的加载；
字体font文件的加载；

HTML资源的处理：

打包HTML资源文件；

处理vue项目的SFC文件.vue文件；

Webpack的安装

webpack的官方文档是https://webpack.js.org/

webpack的中文官方文档是https://webpack.docschina.org/
DOCUMENTATION：文档详情，也是我们最关注的

Webpack的运行是依赖Node环境的，所以我们电脑上必须有Node环境

所以我们需要先安装Node.js，并且同时会安装npm；
Node官方网站：https://nodejs.org/

webpack的安装目前分为两个：webpack、webpack-cli

那么它们是什么关系呢？

执行webpack命令，会执行node_modules下的.bin目录下的webpack；
webpack在执行时是依赖webpack-cli的，如果没有安装就会报错；
而webpack-cli中代码执行时，才是真正利用webpack进行编译和打包的过程；
所以在安装webpack时，我们需要同时安装webpack-cli（第三方的脚手架事实上是没有使用webpack-cli的，而是类似于自己的vue-service-cli的东西）

全局安装: npm install webpack webpack-cli –g

局部安装: npm install webpack webpack-cli –D

webpack配置

Webpack的默认打包

我们可以通过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

创建局部的webpack

前面我们直接执行webpack命令使用的是全局的webpack，如果希望使用局部的可以按照下面的步骤来操作。

第一步：创建package.json文件，用于管理项目的信息、库依赖等

npm init

第二步：安装局部的webpack

npm install webpack webpack-cli -D

第三步：使用局部的webpack

npx webpack

第四步：在package.json中创建scripts脚本，执行脚本打包即可

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack"
},

配置完成使用npm run build运行

Webpack配置文件

在通常情况下，webpack需要打包的项目是非常复杂的，并且我们需要一系列的配置来满足要求，默认配置必然是不可以的。

例如我们的入口文件不是index.js
例如我们打包的文件夹不想叫做dist, 以及文件不想叫做main.js

我们可以在根目录下创建一个webpack.config.js文件，来作为webpack的配置文件：

// 导入path模块
const path = require("path")

// 导出配置信息
module.exports = {
  // 设置入口文件
  entry: "./src/main.js",
  output: {
    // 打包后的文件名
    filename: "bundle.js",
    // 打包后的文件夹路径, 以及文件夹名
    path: path.resolve(__dirname, "./build")
  }
}

继续执行webpack命令npm run build，依然可以正常打包

指定配置文件

但是如果我们的配置文件并不是webpack.config.js的名字，而是其他的名字呢？

比如我们将webpack.config.js修改成了 wk.config.js；
这个时候我们可以通过 –config 来指定对应的配置文件: webpack --config 指定的文件名

但是每次这样执行命令来对源码进行编译，会非常繁琐，所以我们可以在package.json中增加一个新的脚本:

例如: 我想要打包的时候执行 wk.config.js 这个配置文件

"scripts": {
	"build": "webpack --config wk.config.js"
},

之后我们正常执行 npm run build来打包即可。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/120095.html