# webpack笔记

**Repository Path**: fxym888/webpack-exercise

## Basic Information

- **Project Name**: webpack笔记
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-11-24
- **Last Updated**: 2022-01-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## webpack
本质上讲是 模块打包器，可以将网页上 依赖各种静态资源 当成 webpack依赖（在webpack入口中引入），经过打包处理，返回到出口文件中
## 安装webpack
创建项目
```js
npm init
```
安装
```js
npm i webpack webpack-cli -D
```

## 自定义webpack配置
在项目根目录下 创建 webpack.config.js
单入口
```js
const path = require('path')
module.exports = {
  // 模式 production打包代码压缩 development不压缩
  mode: 'production',
  // 单入口
  entry: path.join(__dirname, 'src/main.js'),
  // 定义出口
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  }
}
```
多入口
```js
const path = require('path')
module.exports = {
  mode: 'production',
  // 多入口
  entry: {
    main1: path.join(__dirname, 'src/main.js'),
    main2: path.join(__dirname, 'src/main2.js')
  },
  // 定义出口
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].[chunkhash:8].js'
  }
}

/* 
 在字符串 []相当于模板字符串 
 name 代表入口文件名
 hash 会根据入口文件 内容生成随机数
 chunkhash 多入口情况 每个 打包js会根据自己的内容生成hash值
*/
```

## 使用html-webpack-plugin 定义网页模板文件
```js
// 安装
npm i html-webpack-plugin -D


const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      title: '今天学习webpack真好玩', 
      // 可以在 public/index.html通过 <%= htmlWebpackPlugin.options.title %>定义网页的标题
      template: path.join(__dirname, 'public/index.html')
    })
  ]
}
```

##  webpack 的 资源解析器 loader
功能：在js中解析 对应的其他类型的资源 
不同类型的资源需要不同的loader 比如 .vue vue-loader
css css-loader
## 如何处理 程序中的  样式文件
### css文件
npm i css-loader style-loader -D
css-loader js会解析css
style-loader 将解析好的css 创建一个style标签 并将css写入style标签中插入到头部中
```js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      }
    ]
  }
}

// 第二种写法 自定义loader一些配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader',
            options: {
               insert: 'body'
            }
          },
          {
            loader: 'css-loader',
            options: {
             
            }
          }
        ]
      }
    ]
  }
}
```

注意：
  有多个loader时  loader执行过程 从后向前
### css预处理器
less
less和less-loader  (node-sass sass-loader)
```js
npm i less less-loader

{
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      }
    ]
  }
}
```

## 配置es6 babel 
安装
```js
npm install -D babel-loader @babel/core @babel/preset-env
```
将babel配置写在babel-loader

```js
// webpack.config.js
{
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', { targets: "defaults" }]
            ]
          }
        }
      }
    ]
  }
}
```
将babel配置 定义在 根目录下的babel.config.js中
```js
{
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: ['babel-loader']
      }
    ]
  }
}
```
根目录下创建babel.config.js
```js
module.exports = {
  presets: [
    '@babel/preset-env'
  ]
}
```

## webpack中处理静态资源
指 图片 音频 视频 字体图标
在webpack5.x以前。没有内置静态资源处理，需要专门安装 
file-loader url-loader 处理静态资源

webpack从5.x开始内置了 静态资源处理
3中

asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现。 将静态资源输出到dist
asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现。变成base64

asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现。在输出静态资源和变成base64之间做选择

```js
{
  rules: [
    {
        test: /\.(png|jpe?g|gif)$/i,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 50 * 1024 // 200kb
          }
        }
      }
  ]
}
```

## 定义路径别名和 省略后缀名
```js
module.exports = {
  resolve: {
    alias: {
      "@": path.join(__dirname, 'src')
    },
    extensions: ['.js', '.json', '.vue']
  }
}
```

## 配置开发环境服务器
webpack-dev-server
```js
// 安装
npm i webpack-dev-server -D
```
```js
module.exports = {
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
    },
    // 是否开启 gzip压缩
    compress: true,
    port: 9000,
    open: true
  }
}
```
package.json中
```json
"scripts": {
    "build": "webpack",
    "serve": "webpack-dev-server"
  }
```
## 搭建 vue spa 开发环境
安装三个插件 vue-loader 解析vue单文件组件 vue-template-compiler 解析 vue模板 vue-style-loader 将单文件组件style标签中的css 通过头部style标签作用到页面上
安装
```js
npm i vue-loader vue-template-compiler vue-style-loader -D
```

```js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  mode: 'production',
  entry: path.join(__dirname, 'src/main.js'),
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.[hash:8].js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'style-loader',
            options: {
              insert: 'body'
            }
          },
          'css-loader'
        ]
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      },
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        }
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 50 * 1024 // 200kb
          }
        }
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: '今天学习webpack真好玩',
      template: path.join(__dirname, 'public/index.html')
    }),
    new CleanWebpackPlugin()
  ],
  resolve: {
    alias: {
      "@": path.join(__dirname, 'src')
    },
    extensions: ['.js', '.json', '.vue']
  },
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
    },
    // 是否开启 gzip压缩
    compress: true,
    port: 9000,
    open: true
  }
}
```