WebPack

1. 安装webpack
- 1.1 初始化项目
- 1.2 创建开发需要的文件
2. webpack打包
3. loader
引入关系梳理

1. 安装webpack

需要下载安装node
终端输入命令安装
- npm install webpack -g 全局安装
- 文件夹下 npm install webpack 安装到文件夹中
- webpack -v 查看版本号
  
  1.1 初始化项目
- 项目文件下终端输入 npm init
- 初始化后项目文件夹下会多出一个package.json配置文件
  
  1.2 创建开发需要的文件
- 2. webpack打包
按照配置文件进行打包
webpack当中有一个config配置单独摘出来
- 项目根目录下创建一个webpack.config.js作为webpack打包的规则
2.1 webpack.config 配置
- config文件中填写的webpack打包的规则
  - webpack打包的时候会根据config文件中的规则进行打包
config文件编写
- 使用commonJS中的方法向外暴露一个webpack配置对象，对象中填写webpack打包规则
- module.exports={}
- 对象中填写webpack打包规则如下
- mode:
  - 配置编译模式
    - ‘development’ 开发模式打包，不会压缩文件字符串类型
    - ‘production’ 项目上线打包，会压缩文件字符串类型
- entry：
  - 配置打包的入口文件
- output对象：
  - 配置打包的输出对象
  - 属性
    - filename：
      - 配置自定义输出的文件名称
    - path:
      - 配置打包完成后的输出存放路径
      - 存放路径要求必须是绝对路径
      - 简写方法__dirname + ‘/out’
        
        __dirname 表示当前路径, 相当于config配置文件在哪个路径下的路径
        ‘/out’ 表示config配置文件下的路径下面的out文件夹
- 2.2 webpack打包指令
- 项目路径下输入webpack指令进行打包
- 打包成功后会生成打包出来的文件，具体存放位置为配置path填写的路径
- html引入对应打包好的文件就可以使用了
- 项目终端下输入 webpack-w
  - 修改后自动重新打包
    2.3 打包多个文件
- 入口文件修改为键值对类型，用于引入多个入口文件
- filename: ‘[name].js’
  - 输出的名字就是是入口文件配置的键名
    3. loader
主要做一些预处理的工作：把一些高级语法转换成浏览器所识别的语法

3.1 css-loader
- 项目下运行 npm intall style-loader css-loader 命令
  - 安装处理css文件的loader
    3. 2loader的配置使用
- webpack.config配置文件中增加配置loader
- 创建module对象
  - 对象下创建rules数组，数组中添加loader规则
  - test表示匹配的文件类型
  - use表示对应要调用的loader
```
module: {
rules: [
// loader规则
{test: /.less$/, use: ['style-loader','css-loader','less-loader']},
{test: /.js$/, use: ['babel-loader']},
]
}
```
    3.3 图片loader
- 项目下运行 npm install url-loader
- 配置loader
```
module: {
rules: [
 // loader规则
 {test: /.jpg|png|gif|svg/, use: ['url-loader']},
]
}
```
- publicPath
  - 是像图片这种静态资源打包后的根路径，当浏览器需要引用输入静态资源文件时，这个配置项指定输入文件的公共URL地址。在loader中它被嵌入到script 或者 link 标签或者对静态资源的引用里。当文件的href 或者 url()与它在磁盘上的路径不一致时就应当用publicPath (像path一样指定) ，这在你想定义把一些或者所有文件放在不同的主机或CDN上时会非常有用。