Webpack 初识

Wepack 基本概念

为什么要使用 Webpack?

1. 现在跟多浏览器不支持 ed6、ed7、esnext 等更高级的语法，但是这些语法又比较好用，使用 webpack 可以帮我们把新语法转换成 es5的语法；可以支持老浏览器；

---

代码编译工具

1. 模块化开发
   它会把你写的每一个 js 编译成一个闭包；
   它可以把所有的文件当做模块来处理
2. 打包编译成 html css js等其他资源文件；

模块化开发的好处

1. 方便维护
2. 保护源代码

Webpack 中文网

https://www.webpackjs.com/

---

Webpack 起步

安装

1. 命令行 cd 到项目文件夹

PS C:\Users\Administrator\Desktop\mi\test\练习14\webpack-demo>

2. 安装命令行

> npm i -g webpack
> npm i -g webpack-cli
> npm i -g webpack-dev-server

# 说明：
# webpack 用来编译生产的
# webpack-cli 命令行工具
# webpack-dev-server 帮你创建一个开发服务器 带热更新的功能

# 检查安装是否成功
> webpack -v
4.32.2

配置

1. 创建编译配置文件 webpack.config.js
   配置文件是用来协助 webpack 知道编译哪些文件，编译成什么样子的文件；
   这个文件中的内容；（nodejs 模块化中，暴露一个模块的写法；）

	module.exports = {
	    // ... webpack 的配置
	}

2. 在命令行执行 webpack 命令，会直接调用 webpack.config.js 这个文件

	> webpack

3. 配置选项
   1）entry：入口配置
   2）output：输出目录
   3）mode： 编译模式（development 开发模式）（production 生产模式）

	// 引入 path模块
	const path = require('path')
	
	module.exports = {
	    // 入口配置
	    entry: path.resolve('src', 'index.js'),
	
	    // 输出目录
	    output: {
	        path: path.resolve('dist'),
	        filename: 'app.js',
	    },
	    
	    // 编译模式
	    mode: 'development'
	}

4. 在配置文件指定的输出目录 dist 下新建 index.html 文件，在这个html文件中引入输出配置中指定的 js 文件；

	<script src="./app.js"></script>

5. 然后就可以在 src/index.js 里写js代码，然后执行 webpack 命令编译到 dirt/app.js之后，引用app.js文件了；

编译非 js文件

由于webpack 自身只理解 JavaScript，当我们在 .js文件中引入了其他类型的文件，如 .css 文件，会报错，这时就需要我们配置一下 loader 选项。
loader 同样是 webpack.config-js 文件中的配置项；

1. 在 webpack.config.js 文件中新建 module 选项；用来解析模块的配置；
   在 webpack 中，所有的文件都会被当做模块来处理；
   不同的模块需要不同的处理器来处理，处理器的概念叫 loader，即加载器；

	module: {
	    
	},

2. 定制加载器的处理规则
   一个正则表达式配一个加载器
   test 选项是正则表达式，如下：匹配所有的以 .css 结尾的文件，只要是以 .css 结束的文件，都用这里这个加载器来处理；
   use 选项里是加载器；

	module: {
	        rules: [
	            {
	                test: /\.css$/,
	                // 多个加载器用字符串数组，单个加载器用字符串；
	                use: ['style-loader', 'css-loader'],
	            },
	        ]
	},

处理 css 的加载器有：

• style-loader 样式加载器，用于把编译好的样式 自动添加到 dom中；
• css-loader 用来编译 css 的；

处理 less 的加载器有：

• style-loader 样式加载器，用于把编译好的样式 自动添加到 dom中；
• css-loader 用来编译 css 的；
• less-loader 用来编译 less 的；

3. 安装 loader
   loader 不是 webpack自带的，需要单独安装；安装到项目里，不是全局安装
   webpack 会自动在项目的 node_modules 目录里找那个模块

	# 生成 package.json 和 package-lock.json 文件
	> npm init --yes
	
	# 安装
	> npm i style-loader css-loader

webpack-dev-server 的使用

1. 安装插件html-webpack-plugin
   这是个 webpack 的插件
   这个插件，允许你添加一个模板，然后他自动把编译好的 js 和 css 添加到你的页面里；

	>  npm i html-webpack-plugin

2. 使用插件：
   在 webpack.config.js 配置文件中

	// [1] 导入 html-webpack-plugin 插件
	const HtmlWebpackPlugin = require('html-webpack-plugin');
	
	module.exports = {
		
		// ...
	
	    // [2] 添加 html 模板模块
	    plugins: [
	        new HtmlWebpackPlugin({
	            template: path.resolve('public', 'index.html');
	        })
	    ],
	
	    // [3] 配置开发服务器
	    devServer: {
	        // 端口号
	        port: '8088'
	    }
	
	    // ...
	}

3. 安装 webpack-dev-server

	> npm i -g webpack-dev-server
	
	# 在本地安装一下 webpack
	> npm i webpack

4. 启动项目

	> webpack-dev-server

5. 访问地址

webpack 初识就到此为止；
webpack 中文网的文档还是比较详细的，后续学习可以看文档的；