自己手动配置脚手架webpack完整详细版(一)

来源:
网络
收录时间:
2021-02-23 17:25:37
社会 阅读 43143

摘要:webpack在中间的作用就是将左边的一些列文件,进行打包、模块化,形成右边的文件和文件包;因为左边的文件有的是浏览器不识别的,经过打包以后,形成右边的文件后,可以在浏览器是直接运行的。  7、以上这些操作,在webpack里,只需要配置好,一下就可以搞定了。  *解析该命令:前面的“webpack"指得是安装,后后面的"webpack-cli"指的是安装了webpack-cli后,就可以把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(‘我要被打包了‘)

 

 

 

4、在package.json的script中,添加脚本

 

  "scripts": {
    // webpack 是webpack-cli中提供的命令,用来实现打包的
    //  ./mian.js 入口文件,要打包哪个文件
    "build":"webpack main.js"
  },
返回顶部