webpack的概念

一、什么是webpack？

webpack 是一个开源的前端包工具。webpack 提供了前端开发缺乏的模块化开发方式,将各种静态资源视为模块,并从它生成优化过的代码。 要使用 webpack 前须先安装 node.js。

webpack是前端的一个自动化工具,有了它可以大大提高写项目的效率,可以对css,js文件进行自动压缩,把sass代码自动解析成对应的css文件,让你的代码和样式实时的显示在浏览器上,当然,我们使用webpack的目的还是为了项目完成后进行打包,webpack并不强制使用AMD或者CMD这之中的某一种方案,而是通过兼容所有模块化方案让你可以按需接入项目，有了webpack，你可以随意选择你喜欢的模块化方案，至于怎么处理模块之间的依赖关系及如何按需打包，webpack会帮你处理好。

二、webpack核心概念

1.入口  entry

webpack是根据入口文件开始打包的，入口文件就是最先使用依赖的文件。

2.出口  output

文件打包好之后输出到哪个文件夹,打包好的文件名都在这里设置

例如：

1）

path
文件夹地址
path：__dirname+“/dist”

2）

filename
文件名

3.plugin

在webpack的运行过程中（运行过程（生命周期））做一些额外炒作处理模块，清理

4.加载器   loader

webpack，默认只能够处理js文件
loader把非js文件转换为webpack可以处理的模块

5.模式     mode

production产品
development开发

6.本地服务器    dev Server

1）

npm i webpack-plugin -D

2）

devServer：{
      open：true，//自动打开浏览器
      host：“localhost”，//域名
      port：8080    //端口号   
      hot：true     //热更新
}

三、loader  加载器

1.css-loader
  处理css文件

2.style-loader
   把css插入到header

3.less-loader
   处理.less

4.MiniCssExtractPlugin.loader
   压缩抽出css-loader

5.fil-loader处理文件，图片

6.url-loader
  当文件比较小的时候转成base64
（减少一次httpm请求）

7.image-webpack
   图片压缩

四、plugins 插件

插件可以使webpack执行范围更广的任务。使用一个插件 只需要 require 它。 然后给它添加到 plugins 数组中。 多数插件可以通过 options 来定义。