06. Vue脚手架(Vue-CLI)：前期领域-webpack安装、配置&相关概念、 postcss

coderHan_

已于 2022-10-27 09:51:10 修改

阅读量664

点赞数 1

分类专栏： vue3.js 文章标签： javascript webpack 前端

于 2022-10-11 16:54:56 首次发布

本文链接：https://blog.csdn.net/HGJyujian/article/details/127257832

版权

vue3.js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1. Webpack基础打包

Vue-CLI是基于webpack；

1.1 认识webpack

是前端的一个构建工具；
前端在目前的开发已经越来越复杂：

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

对于前端开发者来讲，并不需要考虑这些问题的原因：

使用三大框架开发：Vue、React、Augular；
事实上，这三大框架的创建过程都是借助于脚手架(CLI)的；
Vue-CLI、create-react-app、Angular-CLI都是基于webpack来帮助我们支持模块化、less、TypeScript、打包优化等的；

1.2 脚手架依赖webpack

我们上面提到的所有脚手架都是依赖webpack；

1.3 webpack到底是什么？

官方解释：

webpack是一个静态的模块化打包工具，为现代的JavaScript应用程序；

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

.hbs 模板引擎；
通过webpack打包 TypeScript等，然后生成 Static Assets，浏览器才能认识；
编写TypeScript、sass等是为了提高安全性；

1.4 Vue项目加载的文件

JavaScript的打包：

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

Css的处理：

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

资源文件img、font：

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

HTML资源的处理：

打包HTML资源文件；

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

1.5 webpack的安装

webpack的安装目前分为两个：webpack、webpack-cli；
webpack-cli的作用：在命令行使用webpack 传递参数的时候， webpack --entry ./src/index.js
webpack、webpack-cli 互相调用；
安装

全局安装：npm install webpack webpack-cli -g
局部安装：npm install webpack webpack-cli -D

1.6 wbepack的基本使用

使用全局webpack的缺点：

项目多，需要webpack版本不同，兼容性有问题；

创建 package.json文件，记录项目相关的依赖包版本等；

npm init // 在项目中创建 package.json的命令；
npm init -y // 后面的选项都为 yes

局部安装的包分两种：

开发阶段会使用到的； npm install webpack webpack-cli -D(–save-dev：简写) 可以指定开发阶段使用
生产阶段会使用到的(生产依赖)； npm install webpack webpack-cli 直接回车，默认生产依赖

如何使用局部webpack进行打包：

第一种方式： npx webpack // 使用局部的webpack
第二种方式：在package.json 中的 “scripts”脚本中添加 “build” : “webpack” 命令行运行 npm run build 也可以完成打包；

1.7 webpack的配置文件

默认去找当前目录下src目录下的index.js 然后进行打包；
命令行配置入口、出口：

npx webpack --entry ./src/main.js --output-path ./build

webpack.config.js webpack的配置文件

const path = require("path");  // 引入一个node路径模块
// 只可以使用 commonJS导出方式进行编写
module.exports = {
	entry:" ./src/main.js ",  // 指定打包的入口文件
	output: {
		// resolve可以拼接地址， __dirname,是这个文件本身的路径
		path: path.resolve(__dirname , "./build"),  
		filename : " bundle.js " // 指定打包之后的文件名称
	}
}

如何修改 webpack.config.js 这个文件名字

// package.json
" scripts " : {
	" build " : " webpack --config han.config.js "  // 指定配置文件为 han.config.js
}

1.8 webpack的依赖图

webpack是如何对我们的代码进行打包:

webpack在处理应用程序的时候，它会根据命令或者配置文件找到入口文件；
从入口开始，会生成一个依赖关系图(数据结构)，这个依赖关系图会包含应用程序中所需的所有模块；
然后遍历图结构，打包一个个模块(根据文件的不同使用不同的loader来解析);

1.9 loader(例css-loader)

什么是loader？

loader可以用于对模块的源代码进行转换(解析)；
将css文件看成一个模块，通过import加载这个模块；
加载这个模块的时候，webpack并不知道如何对其进行加载，必须制定对应的loader来完成这个功能；

css 读取css文件：css-loader；
如何使用css-loader：

内联方式(基本不用)；
CLI方式(webpack5中不再使用);
配置方式；

1.10 loader配置方式

在webpack.config.js文件中写明配置信息:

module.rules中允许配置多个loader;
这种方式可以更好地表示loader的配置，方便后期维护，同时对各个loader有一个全局的概览；

rules属性对应的值是一个数组: [ rules ]
rules属性中包含的：test、loader（use的简写）、use

module: {
	rules : [
		{
			// 正则表达式  $表示以 .css 结尾的所有文件,
			//  \ 转义 ， .在正则中代表很多其他字符
			test:/\.css$/,  
			// 使用的laoder为css-loader  （语法糖）
		    // loader: " css-loader "
		    // 完整写法
			use: [ 
				" css-loader "   // 一个css-loader可能没有办法正确显示，这种可以写多个loader
			]
		}
	]
}

认识style-loader

css-loader只是负责将.css文件进行解析，并不会将解析之后的css插入到页面中；
如果我们希望再完成插入style的操作，还需要style-loader；

use中的loader加载的顺序是从后往前执行loader；

1.11 如何处理less文件(less-loader)

将less转成普通的css，通过lessc(less Compiler)，这个跟webpack没有关系**；
npx 是去 node_module的bin下面去找某一个目录的；

1.12 认识PostCSS工具

通过JavaScript来转换样式的工具；
帮助我们进行一些CSS的转换和适配，比如自动添加浏览器前缀，css样式的重置；
如何使用PostCSS：

查找PostCSS在构建工具中的扩展，比如webpack中的postcss-loader；
选择可以添加你需要的PostCSS相关的插件；

命令行使用postcss

npm install postcss postcss-cli -D
需要添加浏览器前缀，要安装autoprefixer： npm install autoprefixer -D
直接使用postcss工具，并且制定使用autoprefixer：
npx postcss --use autoprefixer -o end.css ./src/css/style.css