01-webpack入门

一.webpack有什么作用

以下是一位博主的解释：点击查看博主描述

• 模块打包。可以将不同模块的文件打包整合在一起，并且保证它们之间的引用正确，执行有序。利用打包我们就可以在开发的时候根据我们自己的业务自由划分文件模块，保证项目结构的清晰和可读性。
• 编译兼容。在前端的“上古时期”，手写一堆浏览器兼容代码一直是令前端工程师头皮发麻的事情，而在今天这个问题被大大的弱化了，通过webpack的Loader机制，不仅仅可以帮助我们对代码做polyfill，还可以编译转换诸如.less, .vue, .jsx这类在浏览器无法识别的格式文件，让我们在开发的时候可以使用新特性和新语法做开发，提高开发效率。
• 能力扩展。通过webpack的Plugin机制，我们在实现模块化打包和编译兼容的基础上，可以进一步实现诸如按需加载，代码压缩等一系列功能，帮助我们进一步提高自动化程度，工程效率以及打包输出的质量。

对于我个人来说，一下午的学习下来，我的感觉，总结下来就是，webpack可以将一些js，css，less，静态文件，（前提是这些文件被一个js入口文件所引用）打包成一个js文件，这样就可以大大降低请求文件传输的次数

二.webpack起步

1. 首先我们新建一个文件夹，我们这里起名为webpack

2. 然后在此文件夹目录下运行控制台，输入npm init,然后出现如下提示，先不用管，一路回车即可
   
3. 接下来，我们安装webpack，控制台输入

npm install --save-dev webpack-cli -D      
//这是webpack5的本地安装方式，-D就是本地安装的意思，全局安装为-g

4. 安装好之后，我们在webpack目录下，新建一个01目录，01目录包含src目录，src目录下又有三个文件，如下

5. 各个文件的代码如下
   
   
   
   
   我们可以看到，css，less文件都被js文件所导入了，这样我们才能打包成一个文件

6. 接下来我们在01目录下，也就是与src同级目录下，新建一个webpack.config.js文件，用来配置我们的webpack，以下是详细的配置和说明

// webpack配置文件
// 作用:指示webpack干哪些活(当运行webpack指令时,会加载里面的配置)
// 所有的构建工具都是基于node平台,模块运行采用commonJS 
const {resolve} = require('path')
// HtmlWebpackPlugin是用来在dist文件夹重生成html文件，它会自动引用打包好的静态资源
const HtmlWebpackPlugin = require('html-webpack-plugin')
// resolve用来拼接绝对路径
module.exports = {
	// 入口文件
	entry:'./src/index.js',
	// 输出文件
	output:{
		// 输出文件名
		filename:'bundle.js',
		//__dirname是该文件所在的绝对路径，这里为‘H:\code\webpack>>’
		//'dist'为我们我新建的文件夹名称，
		//下面这个这只的作用，就是将输出路径配置为H:\code\webpack\dist
		path: resolve(__dirname,'dist'),
		
	},
	// loader配置
	module:{
		// loader配置
		rules:[
			
			{
				// 匹配哪些文件
				//以.css结尾
				test: /\.css$/i,
				use: [
					// use中的loader执行顺序是从下到上,从右到左
					// 创建style标签,将js中的样式资源插入,添加到head中生效
					'style-loader',
					// 将css文件变成commonJS模块,加载在js中,里面的内容是字符串
					'css-loader'
					
				]
			},
			{
				test: /\.less$/i,
				use:[
					'style-loader',
					'css-loader',
					'less-loader'
				]
			}
		],
	},
	// 插件配置
	plugins:[
		// 默认会创建一个html文件,引入导出的js/css，等所有静态资源 
		new HtmlWebpackPlugin({
			// 赋值template下的文件
			template:'./src/index.html'
		})
	],
	// 模式
	// mode:'production'
	mode:'development'//开发模式 
}

7. 接下来，我们就需要安装这些loader和plugin了
   切记，我们一定要在上一层目录，也就是webpack目录下安装！！！

npm i less-loader css-loader style-loader less -D
//这里的less一定不要少，少了会报错
npm i html-webpack-plugin -D

全部安装好之后就可以在01文件夹下输入webpack进行打包，打包成功

这是打包好折后的效果，只有一个js文件