webpack相关知识

webpack详细讲解

1.认识webpack
2.webpack的安装
3.loader的使用
4.plugin的使用

1.认识webpack

1.1定义和作用

• 定义：webpack是一个现代化的javascript应用的静态模块打包工具。
  模块，打包

• 作用：处理模块间的依赖关系，并且将各种资源模块进行打包合并成一个或多个包。（打包期间，对资源进行处理，比如压缩图片，es6转es5等）

1.2和grunt/gulp对比
grunt/gulp更加强调的是前端流程的自动化，模块化不是它的核心。
webpack更加强调模块化开发管理，而文件压缩合并、预处理等功能，是他附带的功能。

2.webpack的安装
安装webpack需要安装node.js。
node.js自带了软件包管理工具npm.

• 查看自己的node 版本

node -v

• 全局安装

 npm install webpack -g

• 局部安装

//--save-dev是开发时依赖，项目打包后不需要继续使用
npm install webpack  --save-dev

webpack打包

webpack src/main.js   dist/bundle.js

3.loader的使用
webpack想要拥有各种转化能力，本身是不支持的。
需要给webpack扩展对应的loader即可。

• loader使用过程：
  步骤一：通过npm安装需要使用的loader
  步骤二：在webpack.config.js中的modules关键字下进行配置
  CSS文件处理

//安装style-loader
npm install --save-dev style-loader

问：在处理css文件过程中，应该是css-loader先加载css文件，再由style-loader来进行进一步的处理，为什么会将style-loader放在前面呢？
答：这次因为webpack在读取使用的loader的过程中，是按照从右向左的顺序读取的。

• less文件处理
  -npm install --save-dev less-loader less
• 图片文件处理
  • npm install --save-dev url-loader
  • npm install --save-dev file-loader

el和template区别
el和template模板的关系是什么呢？
我们知道el用于指定Vue要管理的DOM，可以帮助解析其中的指令、事件监听等等。
而如果Vue实例中同时指定了template，那么template模板的内容会替换掉挂载的对应el的模板。

4.plugin的使用
4.1定义：plugin是插件的意思，通常用于对某个现有的框架进行扩展。
4.2loader和plugin区别
loader主要用于转换某些类型的模块，它是一个转换器。
plugin是插件，它是对webpack本身的扩展，是一个扩展器。
4.3plugin的使用过程：
步骤一：通过npm安装需要使用的plugins(某些webpack已经内置的插件不需要安装)
步骤二：在webpack.config.js中的plugins中配置插件。