初学Webpack

一、Webpack是什么

Webpack是一种前端资源构建工具，是一个静态模块打包器(module bundler), 它能够分析你的项目结构

在Webpack看来，前端的所有资源文件(js/json/css/img/less)都会作为模块处理

它将根据模块的依赖关系进行静态分析 打包生成对应的静态资源

为了能让代码具备更高的复用性、可读性和维护性，我们可以将网页中的内容划分成不同的模块，使用 ES6 module

webpack 也可以识别 CommonJS 模块引入规范、CMD、 ADM 模块规范

二、为什要使用Webpack

现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法

• 模块化，让我们可以把复杂的程序细化为小的文件;

• Scss，less等CSS预处理器

三、Webpack优点

1 . 不需要在 HTML 中引入很多的 JS 文件，提高文件加载速度。
2 .文件和文件之间的依赖关系会变得很明确，降低出错率，提高代码的可维护性。
3. .webpack 就是将 .jpg .png .sass .sass .js .sass .js .hbs 等文件压缩到一个文件内.减少源文件的体积.来加快网页运行效率.提高用户体验.
4 .可以减少我们的request 请求.
5.它甚至可以将我们浏览器解析不了的ES6语法通过loader帮我们解析成浏览器所熟悉的ES5

四、webpack作用

1.代码压缩混淆
2.处理js兼容问题
3.性能优化

五、Webpack能干什么

代码转换,文件优化,代码分割,模块合成,自动刷新,代码校验,自动发布

六、Webpack的五大核心

(1) Entry: 入口(Entry)指示webpack以哪个文件为入口起点开始打包

(2) Output: 输出(Output)指示 webpack打包后的资源bundles输出到哪里去，以及如何命名这些文件

(3) Loader: Loader让Webpack能够去处理那些非JavaScript文件(webpack 自身只理解JavaScript) loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

(4) Plugins: 插件(Pluugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。

(5) Mode: 模式指示webpack使用相应模式的配置
通过选择 development 或 production 之中的一个，来设置 mode 参数，你可以启用相应模式下的 webpack 内置的优化

devolopment 开发模式 能让代码本地调试运行环境

production 生产模式 能让代码优化上线运行的环境

七、安装webpack

1.webpack 初始化package.json

创建一个文件夹, 然后进入文件夹 ,在 命令行 输入

npm init  

2.下载安装webpack

全局安装

 npm install webpack webpack-cli -g  //全局安装 可以使 webpack 在全局环境下可用

本地安装

  npm install webpack webpack-cli -D

注意点: webpack4 以上的版本需要全局和本地都安装 webpack-cli

3.使用

命令行输入命令

./node_modules/.bin/webpack -v

4.打包配置 webpack.config.js 文件

在项目的根目录中新建 webpack.config.js 文件 一个 src 文件夹,文件夹里面创一个index.js文件 src/index.js

5.运行指令

开发环境

 webpack ./src/index.js -o ./build/main.js --mode=development

webpack会以 ./src/index.js 为入口文件.打包后输出到 ./build/main.js 整体打包环境是开发环境

生产环境

webpack ./src/index.js -o ./build/main.js --mode=production

生产环境比开发环境多了一个压缩js代码

生产环境和开发环境将es6模块化编译成浏览器能识别的模块化
生产环境比开发环境多一个压缩js代码
注意点: 引入样式文件 webpack不能处理

6.webpack 开发环境的配置

(1)打包样式资源

先运行  
npm init
npm i webpack webpack-cli -D

（2）在src 目录下新建一个css文件夹,在里面新建一个 index.css 文件

(3)在src里面创建一个index.js,引入 css 文件

7.json打包

在src下新建一个json文件

8.webpack 打包样式资源

八、总结

1.加单的说webpack 就是一个项目打包工具,它会把你的代码打包成一个浏览器能解析出来的格式运行。
2.打包配置 webpack.config.js 手动配置 文件名是固定的,如果要修改文件名的话,可以使用下面那两种方式,只要路径写对就可以。
3.webpack 能处理js/json文件,但不能直接处理css/img等其他资源
4.为我们代码的压缩体积
5.生产环境和开发环境将es6模块化编译成浏览器能识别的模块化
生产环境比开发环境多一个压缩js代码
6.网页的运行效率提升了很大作用