webpack基础知识学习

1.webpack有什么用？

我的理解：项目越大，所需要的文件也就越多。当我们项目上线以后，不可能将项目的源文件上传。如果我们没有对项目先进行打包，那么我们将会需要很多http请求，使得我们的加载速度变缓慢，用户体验不友好。反之，我们对文件打包后，还保留了单一的模块以及在打包时，打包工具会对我们模块之间的依赖也进行处理。

2.webpack是什么？

理解：webpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。 在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。 它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。

3.webpack的五个核心概念？

1）Entry
   入口（Entry）指示webpack以那个文件为入口起点开始打包，分析构建内部依赖图。
指示 Webpack 从哪个文件开始打包。
2）Output
   输出（Output）指示webpack打包后的资源bundles输出到哪里去，以及如何命名。
3）Loader
   Loader让webpack能够去处理那些非javascript文件（webpack自身只理解javascript）
4）Plugins
   插件（Plugins可以用于执行范围更广的任务。插件的范围把偶偶，从打包优化和压缩，一直到重新定义环境中的变量等）
5）Mode
   模式(Mode)指示 webpack 使用相应模式的配置。
开发模式：development，生产环境 production。

4、准备 Webpack 配置文件

在项目根目录下新建文件： webpack.config.js

const path = require("path");
module.exports = {
	//入口---相对路径
	entry: "",
	//输出---绝对路径
	output: {
		 path: path.resolve(__dirname,"dist"),
		 //文件名
		 filename: "",
	},
	//加载器
	module: {
		rules: [
			//loader 的配置
		],
	},
	//插件
	plugins: [],
	//模式
	mode: "",
}

webpack 是基于 Node.js 运行的，所以采用 Common.js 模块化规范。

5、修改 webpack 配置