webpack基础

webpack使用步骤

1.初始化项目：npm init -y
2.安装依赖 webpack、webpack-cli （webpack命令行工具）
3.在项目中创建src目录，入口文件index.js文件中编写代码
4.执行 npm run build 将入口文件代码打包到出口目录下（dist目录）

webpack.config.js配置文件

mode  配置 指定模式  production、development；
entry  配置 入口；
output  配置 出口；
module  配置  loader加载器 ；
plugin  配置 插件；

const path = require("path");

// 引入html插件

cons HTMLPlugin = require("html-webpack-plugin");

const { CleanWebpackPlugin } = require("clean-webpack-plugin")

module.exports = {
​		mode:"production",  
​		entry:"./src/index.js",  
​		output:{	
​			path:path.resolve(__dirname,"dist"),		//指定打包的目录，必须要绝对路径
​			filename:"main.js",		//打包后的文件名
​			clean:true			// 自动清理打包目录
​		},    
​		module：{		
​			rules:[
​				{
​					test:/\\ \.css$/,
​					use:["style-loader","css-loader"]     //  loader 从右到左（或从下到上）执行，此处先css-loader，再style-loader
​				}
​			]
​		},
​		plugins:[
​			new CleanWebpackPlugin(),
​			new HTMLPlugin()
​		],
​		devServer:{}

}

加载器 loader

webpack默认情况下，只会处理js文件，如果要处理其它类型的文件，需要什么引入什么loader。
babel-loader、sass-loader、ts-loader……

以css为例：
​	使用css-loader可以处理js中的样式；
​	使用步骤：
​			1.安装 npm i -D css-loader
​			2.配置

module：{
​	rules:[
​		{
​			test:/\\ \.css$/i,
​			use:["style-loader","css-loader"]     //  loader 从右到左（或从下到上）执行，此处先css-loader，再style-loader
​		}，
​		{

​			test:/\\.(jpg|png|gif)$/,
​			type:"asset/resource"   // 表示将文件作为资源进行处理，并将其拷贝到dist目录下。图片直接资源类型的数据，可以通过指定type来处理。
​		}，
​		{
​			test: /\.m?js$/,
​			exclude: /(node_modules|bower_components)/,
​			use: {
​				loader: 'babel-loader',
​				options: {
​					presets: ['@babel/preset-env']
​				}
​			}
​		}
​	]
}

css-loader是把css文件转换为js代码使用，这样js文件直接引入的css文件就可以直接import引入css文件使用

style-loader是让css样式生效。

webpack5之后不再需要使用loader来处理以.png结尾的文件，而是可以直接使用asset模块来简化配置和处理。asset是webpack5内置的模块，不需要额外安装任何东西

​
在编写js代码时，经常需要使用一些js中的新特性，而新特性在旧的浏览器中兼容性不好，导致 我们无法使用一些新的特性，现在，我们可以使用新特性编写代码，代码编写完成时使用一些工具（babel）将新特性代码转换为旧代码。

babel  -- 进行js语法转化，以提高代码的兼容性。 如  箭头函数-》普通函数  ，let-》var

使用步骤：

1.安装 npm install -D babel-loader @babel/core @babel/preset-env 

​				// babel-loader 连接webpack和babel，让babel可以在webpack中使用；

​				// @babel/core  babel的核心，实现主要功能，转化js代码

​				// @babel/preset-env  预设环境，babel中也是一个个插件，不同的转换对应不同的插件，用预设指把常用插件提前准备好

2.配置 

module: {
  rules: [
    {
      test: /\.m?js$/,			// 以mjs或js结尾的文件
      exclude: /(node_modules|bower_components)/,  // 排除node_modules或bower_components目录中的文件
      use: {					// 传对象给babel加载器做更详细的配置
        loader: 'babel-loader',		// 使用babel加载器
        options: {
          presets: ['@babel/preset-env']	// 用babel的默认配置
        }
      }
    }
  ]
}

3.在package.json中设置浏览器兼容列表

"browserslist":[
​	"defaults"  		// 设置默认支持的浏览器
]

插件 plugin

插件用来为webpack扩展功能

常用plugin：

html-webpack-plugin ：自动生成html文件，并将打包后的js和css文件自动引入html文件中，方便在浏览器中查看应用程序。

uglifyjs-webpack-plugin：压缩js代码，减小文件体积，提高应用程序的性能。

mini-css-extract-plugin：将css文件从js中分离出来，形成单独的css文件，提高浏览器加载CSS文件的效率。

define-plugin：在代码中定义全局变量，方便在不同环境下进行调试和测试。

clean-webpack-plugin：在每次构建前清理打包目录dist，再生成新的，避免旧文件对新文件的影响。

​ 1. html-webpack-plugin：可以在打包代码之后，在打包目录dist中自动生成html文件

​ 使用步骤：安装依赖；配置插件。

​	plugins:[
​		new HTMLPlugin({
​			title:"hello" ,    // 浏览器打开生成的html页面的tab名
​			template:"./src/index.html"    // 将src目录下的index.html文件作为模板，在打包后目录dist下生成一个相同的index.html 并在其中自动引入打包后的js和css文件
​		})
​	]

loader是处理文件的；

plugin是扩展功能的；

开发服务器 webpack-dev-server

可以提供用于开发的 HTTP Server（开发服务器），它已集成了自动编译和自动刷新页面的功能。是官方的一个库，

devServer: {
        port: 8000,  		//  监听的端口号
        open: true,  		// 开启服务器后，自动打开浏览器，自动访问地址 Http:localhost:8000
        index:'index.html', 		//  默认配置是index.html 当访问Http:localhost:8000 时，没写具体的资源文件，会加上index.html 访问Http:localhost:8000/index.html
        proxy: { 				// 配置代理规则，常用于跨域访问
            "/api": {   			// 这是个正则表达式，只要请求地址中能够符合正则表达式，就用代理，把协议，主机名，端口 换成代理的
                target: "http://xxx.com",
                changeOrigin: true 		// 请求时候的request headers，如果不配置，请求头里还是localhost：8000，服务器要求请求头匹配， 所以要更改请求头中的host和origin
            }
        }
 },