webpack梳理之基本配置

webpack实际上我觉得很多人都是,会用,会配,但是来点系统的知识,也懒得记也记不住,我也是这样,会用,但是实际上并没有什么系统性的梳理过,那我觉得还是要挑战一下的,慢慢的从头梳理一下下,可能会有差错,希望看到的可以毫不犹豫地指出来,毕竟我也是菜狗,谢谢谢谢

1.webpack概念

• (1) 什么是wabpack
  本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。
  说说我的理解哈,就是说webpack是一个打包工具,什么叫打包,就是把文件进行一个总结,加工,然后输出新的文件,webpack会从一个入口或者多个入口文件进行分析,然后通过入口文件的一系列引入等操作去进行构建,探索出一个依赖图,这个依赖图的作用就是按图索骥的方式找到了所有的需要的文件,然后进行一个处理,分模块的去组成bundles,至于啥叫bundles,其实bundles就是是由多个不同的模块产生，它是已经加载完毕和被编译后的源代码的最终版本,这样来讲能比较简单的理解webpack的过程

• (2) webpack中的核心概念
  所有的webpack配置都在webpack.config.js中,但是其实也是可以拆分开来的,当逻辑较为复杂时拆分为多个文件然后webpack.config.js进行引入配置,我看webpack官网文档是说有七个,入口(entry)/输出(output)/加载器(loader)/插件(plugin)/模式(mode)/浏览器兼容性(browser compatibility)/环境(environment),先聊前四个

1.entry(入口):从上边的什么是webpack中可以看到,webpack的起步就是从一个或者多个入口进行构建,那么入口的配置就是第一个核心概念,webpack通过入口文件然后找寻入口文件的所有依赖文件然后找依赖文件的依赖文件…如此往复循环就能找到所有需要的文件

//单入口
module.exports = {
  entry: "./src/app.js"
};
//多入口
module.exports = {
	//	entry:["./src/html1.js","./src/html2.js"]
  	entry: {
    	html1: "./src/html1.js",
    	html2: "./src/html2.js"
  	}
 }

单入口与多入口的区别就是配置的时候编程对象即可,webpack解析配置的时候会做出判断,内在逻辑也没啥复杂的,稍微一想就能明白怎么实现的,判断呗,这里有个重要的点就是,多入口时候也可能会有想把所有东西都打包到一块去的需求,那就需要把多入口传参的时候改成数组传参,这样的话输出的时候还是会输出到一个文件夹里

2.Output(出口):既然有了入口文件让webpack找到所有需要打包的文件,那么打包之后肯定是要有地方去存放的,那我们就需要给webpack指明出处,告诉他要保存在哪里,这就是第二个核心概念

// 出口配置
const path = require('path');

module.exports = {
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    //filename: "[name].js"
    filename: 'my-first-webpack.bundle.js',
  },
};

出口配置,肯定是要跟入口配置有关系的,入口那不但配置多入口还是单入口,还会通过不同的传参方式去决定是多出口还是单出口,当多出口的时候就可以通过[]来使用上边多入口传参时候的对象kay值,key值也就是name,至于hash值用不用,或者说要往后边拼点啥就看自己意愿了,但是一般都会用的,因为这有一个部署时候的缓存的事情

3.Loader(加载器):啥叫加载器,其实简单来讲就是webpack的文件转换的扩展,webapack为啥要有这样一个东西,是因为webpack本身只关注js类型的文件和json类型的文件,其他的文件webpack是没有识别打包的能力的,那么就需要这个加载器了,通过一种加载器或者多种加载器的联合使用,来输出能让webpack识别的预期对象,这样webpack就可以把出了js和json外的文件打包进来了

const path = require('path');

module.exports = {
	entry: './src/app.js',
  	output: {
    	filename: 'my-first-webpack.bundle.js',
  	},
  	module: {
    	rules: [{ test: /\.txt$/, use: 'raw-loader' }],
    	//rules: [{ test: /\.css$/, use: ['style-loader',"css-loader"] }],
    	//rules: [
    	//			{ 
    	//				test: /\.css$/, 
    	//				use: [{
        //            		loader: "babel-loader",
        //            		options: {
        //                		presets: [
        //                    		['@babel/preset-env', { targets: "defaults"}]
        //                		]
        //            		}
        //        		},...]
        //			}
        //		],
  	},
};

我们来看loader的配置,实际上实在module中配置的,有三种情况,
第一种就是最简单的配置,两个必须的参数,一个是test,一个是use,两个的作用,一个是用来匹配筛选要经过loader来加载的文件,一个是使用的loader
第二种就是使用多个loader来加载的,因为有时候一个loader并不能直接转换成webapack可以识别的对象,需要从下往上的从右往左的倒序来一层层的转换筛选出来的文件,这个其实我没太理解,为啥要从右往左从下往上,其实也就是一种规则把,开发webpack的人制定的一个奇怪的规则,起源我也不知道
第三种就是loader的加载过程也需要有参数配置的,来满足我们不同的需求,通过配置参数来实现不同的加载方式
三种配置方式的区别就是,一个是字符串一个是字符串数组,一个是对象数组,都可以识别且正常使用,按照需要来使用就行
loader可以自己开发来试试看,更好深入理解,具体怎么开发网上有文章详解,回头我们也可以梳理一下

4.plugin(插件):loader 用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量,简单来讲就是plugin是实现更加宽泛的业务,不再是简单的转换加载文件,实现一些自定义想要实现的东西

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 用于访问内置插件

module.exports = {
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};

plugin的使用更为简单,所有的plugin都是插件,插件的意思是啥呢,就是各种各样的,一切都是自定义的,那我们其实链test和use这样的必传参数都没有,一切都是以plugin插件开发者说了算,具体的传参都是开发者定义的,所以我们使用的时候就直接看要用的plugin的配置文档就好,人家让咋配就咋配,就像是使用ui组件一样,了解参数作用,然后配置使用,只需要require来引入使用就好

两个漏掉的知识点

• 绝对路径
  path.resolve(__dirname, ‘dist’),就是拼接绝对路径的方式,__dirname代表,当前执行的逻辑在哪里,就是表示当前文件所在的目录
• require
  引入方式,CommonJS 作为 Node.js 的规范，一直沿用至今,由于 npm 上 CommonJS 的类库众多，以及 CommonJS 和 ES6 之间的差异，Node.js 无法直接兼容 ES6,所以说require就是nodejs引入的规范,import作为ES6的规范,在这里是不可用的嗷,毕竟我们打包还需要转换ES6代码去兼容,在配置文件中搞这个,那不就是在搞事情了嘛

当前简单梳理了webpack最基础的东西,也就是四个核心的配置,webpack的熟练远远不止于此,还需要知道loader和pulgin都有哪些常用的,具体使用都是怎样的,怎样填坑,还有就是打包过程中,我们需要的环境变量需要做的其他事情,还有很多很多,接下来会慢慢梳理