webpack超详细教程

这是一篇非常用心的博客了 讲解的非常清楚了 应该再不会有看不懂的吧 相信有人和我一样 如果刚开始学习webpack会一头雾水 不知道如何开始 今天就详细的记录一下webpack的具体步骤以及需要注意点 老规矩 有错误的欢迎指正
什么是webpack以及他的的作用是什么 我觉得这一篇文章说的是比较好懂的一个什么是 webpack 以及 其作用?
总的来说就是一个模块打包工具

首先，认为它是一个工具，帮助我们更好的处理事情的。
其次，“打包”，如何理解？ 假设我们需要寄快递。我们将许多的物品都放进了一个纸皮箱，然后进行封箱。 这就是打包。 对应到前端开发来说，就是将很多的的 css文件，js文件，图片等“物品”，全都写进一个js文件，而不是在一个html页面通过script,link标签去引入多个静态资源。
模块化，其实不同的css，不同的js就是一个模块。比如说，一个index.html,通常会有一个index.css,
一个index.js，还有其他的css，js。这些不同的文件都可以看做不同的模块。不同的模块有各自的作用。
总结来说：用这个工具，帮助我们将不同的资源和文件，进行打包，也就是合并在一个文件里面。 但是不仅仅
如此，它还附加了一些更好用的功能。
附加功能：
1.CSS 预处理。将 Less, Sass 编译成css
2.ES6 语法 转成 ES5 …
2.作用
进行重新加载编译。实际就是将浏览器不认识的语法编译成浏览器认识的语法。比如less
编译成css，ES6 语法 转成 ES5等等。
减少io请求。通常我们在请求后，会返回一个html到浏览器。这时，我们如果打开控制台，就会发现在html页面通过script,link等标签引用的静态资源， 浏览器会再次发出请求去获取这些资源。但是webpack的打包，将所有的静态资源都合并好了，减少了io请求。

接下来就是超详细的步骤了

1. webpack的默认配置

1.首先创建一个文件夹 例如：web
2.然后node初始化 npm init -y

项目文件夹里就会出现一个pakage.json的文件

3.安装模块 npm i webpack webpack-cli --save-dev
百度中找到官网的指南 起步那里 安装webpack-cli （如果网速不好需要等待一会儿 可以先进行下一步创建文件夹）

4.创建文件夹 dist dis里面创建index.html文件 创建文件夹 src src里面写index.js文件
5.等第三步webpack-cli 安装好后 输入 npx webpack进行打包 打包完毕 dist文件里面会出现一个main.js

6.在index.html里面引入main.js (main.js是根据src文件夹里面的文件打包过后的js文件)

2. 配置webapck.config.js文件

创建一个webapck.config.js和src同级
找到

配置webapck.config.js

再次构建

3. npm脚本

考虑到用 CLI 这种方式来运行本地的 webpack 不是特别方便，我们可以设置一个快捷方式。在 package.json 添加一个 npm 脚本(npm script)：
我们可以把比较长的命令 直接配置到package.json里面 然后直接执行我们自己定义的名称就好
配置完成之后 使用npm run 配置名 我这里配置名是build

4. 打包第三方模块

这个看你的js文件中写的是什么 比如如果你需要使用到jquery 你需要导入jQuery 再重新启动一遍

1. 安装模块
2. 导入模块
3. 使用模块
   
   导入新的模块 修改了index.js之后 必须重新使用npm run build 重新打包 然后才能起效

5.开发服务器

找到指南

6. 打包其他资源

webpack的本质是一个打包工具 默认只能打包js文件 所以css less等文件都打包不了

为了能够识别其他的文件 webpack提供好了一个loader机制 用来翻译其他文件类型的文件

1. 解析css

（这里使用less sass都是差不多的步骤 所以不重复了）

1. 安装模块 npm install --save-dev style-loader npm install --save-dev css-loader

   官方文档只让安装了css-loader 所以style-loader需要我们自己安装

2. 在webpack.config.js里面写配置文件 如下图

3. 配置完成之后 需要重启服务器 npm run start 才会生效

其实就是中文文档太麻烦 然后这里把常用的提取出来了