webpack-----从入门到精通（一）

一，webpack的认识

一直用vue脚架自动生成项目，但其他最主要的webpack是怎么搭建的，怎么编译 怎么构建  估计很少人会去关注，做个webpack的记录和见解，我们先通过一个图片来认识webpack;

这个图片基本就把webpack的功能介绍出来了

1.  能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理,
2. 能有Grunt或Gulp所有基本功能  比如打包、压缩混淆、图片转base64等。将less。sass编译成css文件；
3. 解决大型项目初始化加载慢的问题,能够在大型项目中运用
4. 每一个静态文件都可以看成一个模块
5. 可以整合第三方库
6. 可以通过node在浏览器里直接运行

二.使用webpack

1.   安装webpack配置 npm init 初始化生成package.json文件 需要你填写相关项目的信息  而通过npm init -y 可以生成一个默认的

2.   npm install -g webpack 全局安装webpack

3. npm init npm install webpack --save 通过npm把webpack的依赖导入项目中

4. 4.x的版本把cli分离出来了，所以必需安装webpack-cli npm install --save-dev webpack-cli  或者 npm install -D webpack-cli

5. 验证是否安装成功：webpack -v，如果出现下面报错

执行一下 npm install -g webpack-cli

就可以了  现在我们就可以开始玩起来了。

三.配置文件的认识

     webpack的工作都是通过配置文件完成的。编译哪个文件、怎么编译、编译成什么样、输出为什么等等，所有的操作都是按配置文件里的内容来完成的，webapck想要运行的话配置文件是必不可少的东西。通常我们都是在webpack.config.js文件进行配置，采用CommonJS的规范，用moudle.exports导出

   配置文件有6个核心的东西组成

1. entry：入口文件（就跟页面的index，从什么地方开始）
2. output：出口文件（这个就是告诉要把这些东西放到什么地方去）
3. module：模块（放lorder，编译浏览器不认识的东西，一些第三方的控件，比如压缩，sass）
4. plugins：插件（辅助开发，提高开发效率，）
5. devServer：服务器（webpack提供的本地服务器 可以直接本地修改映射到浏览器 同步更新 而不用在按刷新）
6. mode：模式，分为开发模式、生产模式。此为4.X里新增的

四. 小测试

     创建一个小demo，目录结构如下

//index.html


	
		
		
	
	
		

			
		
	


//js/index.js
window.onload = ()=>{
	const box = document.querySelector('.box');
	box.innerHTML = '1231231';
}

//webpack.config.js
const path = require('path'); //nodejs的语法，引入路径模块，为了输出的时候找绝对路径

module.exports = {
	entry: './js/index.js', //入口文件为main.js  
	output: { //输出
		path: path.resolve(__dirname, 'dist'), //path.resolve为nodejs的固定语法，用于找到当前文件的绝对路径
		filename: 'bundle.js' //输出的文件名
	},
}

对应的代码如上图 ，打开命令窗口 执行 webpack 会自动去查找 webpack.config.js文件，执行里面的配置

如果执行了webpack报错  先执行一下 npm i --save-dev webpack，在重新执行webpack

在目录我们可以看到一个新的文件夹 dist 

引入的话可以看到为我们刚才在index.js写的效果是一样的

这个就是最简单的webpack运行

五.语法糖和步骤

  官网文档 https://www.webpackjs.com/concepts/entry-points/

1.   入口文件   entry: string|Array| {[entryChunkName: string]: string|Array}，
   1. 只打包一个文件（单入口），写个字符串
   2. 把多个文件打包成一个文件，写个数组
   3. 把多个文件分别打包成多个文件，写成对象
   4. webpack把打包后的文件叫Chunck
2. 出口文件 output 配置 output 选项可以控制 webpack 如何向硬盘写入编译文件。注意，即使可以存在多个入口起点，但只指定一个输出配置
   1. filename  用于输出文件的文件名。字符串
   2. 目标输出目录 path 的绝对路径。 __dirname是nodejs里的一个模块，表示当前文件的绝对路径 通过引入path模块 通过resolve来定义绝对路径  path.resolve(__dirname,'输出文件的路径');

六.多文件

目录的话 就是在JS文件夹里多添加了一个文件two.js文件

数组形式 ：

可以看出webpack会把数组里所有文件打包成一个js文件

对象格式

webpack会把对象里的文件分别打包成多个文件

更加详情的配置请到webpack官网查询