webpack打开项目命令_自己手动配置脚手架webpack完整详细版（一）

一、总览webpack的作用:

webpack在中间的作用就是将左边的一些列文件，进行打包、模块化，形成右边的文件和文件包；因为左边的文件有的是浏览器不识别的，经过打包以后，形成右边的文件后，可以在浏览器是直接运行的。

即：问：webpack是什么？

答：是前端模块化打包(构建)工具。

webpack可以看作是 模块打包机：它做的是，分析你项目结构，找到JavaScript模块、其他的一些浏览器不能直接运行的拓展语言(Scss , less等)以及新语法(像ES6等)

，并将其转换和打包为合适的格式供浏览器使用。

问：为什么要使用webpack？

答：1、浏览器不识别SAA、LESS ==>需要对less/sass预编译成css  => 供浏览器使用；(光这一步就需要手动使用一个工具)

2、项目中的模块化以及互相之间引用依赖造成文件分散  ==> 需要把各个分散的模块集中打包成大文件，减少HTTP的链接的请求次数(这一步也需要一个工具)

3、打包成了大文件，体积就变大了 ==> 所以代码要进行压缩(这一步还需要一个工具)

4、部分ES6语法有兼容问题 => ES5 ==>浏览器使用  (这里还需要一个工具)

5、。。。。。。

6、以上这些操作以前都是需要手动处理，需要很多个工具，这是非常繁琐的，这个时候webpack就可以上场了。

7、以上这些操作，在webpack里，只需要配置好，一下就可以搞定了。

webpack的基本能力：处理依赖、模块化、打包

1、处理依赖：方便引用第三方模块，让模块更容易复用、避免全局注入导致的冲突、避免重复加载或者加载不必要的模块

2、合并代码：把各个分散的模块集中打包成大文件，减少HTTP的链接的请求次数，优化代码的体积(压缩代码)

3、各种插件：babel把ES6+转化为ES5-等。

webpack的工作原理：

1、简单说就是分析代码，找到“require”、“import”、“define”等关键词，并替换成对应的模块的引用。

2、在一个配置文件中，指明对某些文件进行编译、压缩、组合等任务。把你的项目当成一个整体，通过一个给定的主文件(index.js)，webpack将从这个文件开始找到你的项目的所有的依赖文件，使用loaders处理它们，最后打包为一个浏览器可以识别的文件。

用示意图解释就是这样的的一个过程。

webpack四个核心概念：入口(entry)、出口(output)、加载器(loader)、插件(plugins)

1、入口：要打包哪个文件

2、出口：要打包到哪里

3、加载器：加载除了js文件其他文件的功能

4、插件：处理加载器完成不了的功能，使用插件

示意图

手动配置webpack的目的：

1、为了更好的使用脚手架做准备

2、能够完成webpack的基本安装

3、能够了解webpack配置文件的作用

4、能够说出webpack中的loader的作用

5、能够使用webpack处理常见资源(css\less\图片)

6、能够说出webpack-dev-server的作用以及 配置

二、webpack配置使用步骤

(一)命名初始化阶段  --- 相当于初始化一个项目

注：项目名不能有汉字，不能取名为 webpack。

1、创建项目名称(手动创建文件夹名)，并 生成  package.json文件(生成这个文件靠后面的命令)，执行的命令是： npm   init   -y

2、安装webpack：npm  i    webpack  webpack-cli  -D

*解析该命令：前面的“webpack"指得是安装，后后面的"webpack-cli"指的是安装了webpack-cli后，就可以把webpack这个词当作命令来用了

webpack：是webpack工具的核心包

webpack-cli：提供了一些在终端中使用的命令

-D(--save-dev)：表示项目开发期间的依赖，也就是：线上代码中用不到这些包了

安装包的几个命令：(几个命令相互可以代替的)

npm  i  xxx    /    npm  i  xxx  -S   /    npm  i  xxx  --save    =>  都会被记录在dependencies里面(发布阶段)

npm  i xxx  -D   /    npm   i  xxx  --save-dev           =>  记录在devDependencies里面(开发阶段)

【执行安装命令时，什么时候加-D，什么时候不加"-D",关键就要看上线后，是否还需要这个插件包，线上需要的话，就不加"-D",线上不需要就加"-D",因为加了，那么该包只会在存在 本地，当上线时，该包就会自动被过滤掉，不会被打包传上去】

【webpack只是上线需要的，线上不需要打包了，所以只是在开发阶段安装使用】

3、创建main.js文件

在里面先随便写一句代码，使其不为空：如：console.log('我要被打包了')