06.vue3组件化开发（二）

webpack基础打包

1.认识webpack
三大框架(vue,react.angular)的创建过程都是借助于脚手架(CLI);
脚手架又是基于webpack帮助我们支持模块化,lass.TypeScript,打包优化等的.

2.webpack是什么？
webpack是一个静态的模块化打包工具。

• 是一个打包工具
• 可以将代码打包成最终的静态资源
• 支持各种模块开发

3.webpack使用前提

安装node.js ， 安装npm ；配置node环境

安装webpack ：
npm install webpack webpack-cli -g //全局安装

4.使用webpack创建dist文件
在书写代码的文件中打开终端，进入当前项目下，输入webpack --version
检查webpack的版本；
再输入webpack，生成一个dist文件（全局安装）
局部安装: (1)npm init -y
生成package.josn文件管理包；
（2）npm install webpack webpack-cli -D （开发依赖）
(3)修改package.json文件

 "scripts": {
    "build": "webpack"
  },

(4)执行 npm run build

---

5.设置webpack配置文件
打包在默认情况下会找src文件下的index.js文件
可以手动指定入口: npx webpack --entry ./src/main.js --output-path ./build
//指定入口为src中的main.js文件,指定出口为build文件

在执行npm run build命令时,为了方便管理配置文件
在目录下新建一个webpack.config.js

const path =require('path');
module.exports = {
	entry : "./src/index.js",
	output :{
		path : path.resolve(__dirname,"./build"),
		filename : "bundle.js"
	}
}

6.webpack依赖关系图

webpack在处理应用程序时,根据命令找到入口文件;从入口开始,会生成一个依赖关系图,依赖关系图中包含程序中所需的模块.,然后遍历结构,打包一个个模块.

7.什么是loader
可以用于对模块的源代码进行转换;
css-loader的使用:
将css文件看成一个模块,通过import来加载这个模块的;webpack并不知道如何对其进行加载,必须制定对应的loader来对模块进行转换.
使用css-loader首先下载,通过npm install css-loader -D

配置css-loader:
内联式(很少使用):

import "css-loader!./css/style.css";

配置方式 :在webpack.config.js文件中配置

module : {
		rules :[
			{
				test :/\.css$/,
				// 语法糖
				// loader :"css-loader"
				use :[
					"style-loader",
					"css-loader"
				]
			}
		]
	}

配置less-loader
下载 npm install less-loader -D
在webpack.config.js文件中配置

{
				test: /\.less$/,
				use : [
					"style-loader",
					"css-loader",
					"less-loader",
				]
			}

8.认识PostCSS
PostCSS通过javaScript来转换样式工具;可以帮助我们进行一些css样式的转换和适配,添加浏览器前缀.
需要借助于PostCSS插件.
先安装怕Postcss和postcss-cli
npm install postcss postcss-cli -D
给浏览器自动加前缀的插件:autoprefixer
在安装这个插件: npm install autoprefixer -D
安装postcss-loader : npm install postcss-loader -D

use :[
					"style-loader",
					"css-loader",
					{
						loader: "postcss-loader",
						options :{
							postcssOptions :{
								plugins:[
									require("autoprefixer")
								]
							}
						}
					}
				]

也可以将这些代码抽取出来,在根目录下新建postcss.config.js文件
文件内代码:

module.exports={
	plugins:[
		require("autoprefixer")
	]
} 

webpack.config.js的配置代码如下即可:

{
				test :/\.css$/,
				// 语法糖
				// loader :"css-loader"
				use :[
					"style-loader",
					"css-loader",
					"postcss-loader"
				]
			},

其他插件:postcss-preset-env
可以将一些现代的css特性转化成大多数浏览器认识的CSS,并且会根据目标浏览器或者运行时环境添加所需的polyfill.
下载插件:npm install postcss-preset-env -D
postcss.config.js文件中修改如下就可以:

module.exports={
	plugins:[
		require("postcss-preset-env")
	]
}