# webpack4-study

**Repository Path**: ironc/webpack4-study

## Basic Information

- **Project Name**: webpack4-study
- **Description**: webpack4 学习笔记
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-02-02
- **Last Updated**: 2022-05-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Webpack4-study

> 学习地址： https://www.bilibili.com/video/BV1bb4y1X7jz?p=5&spm_id_from=pageDriver
>
> webpack版本：4.44.1
>
> webpack-cli版本: 3.3.12





## Html插件

版本： `"html-webpack-plugin": "^4.3.0"`,

使用方式

```js
const HtmlWebpackPlugin = require('html-webpack-plugin')

plugins: [
    new HtmlWebpackPlugin({
      hash: true,
      template: path.resolve('./index.html'),
      filename: 'index.html',
      //   minify 压缩配置
      //   minify: {
      //     removeAttributeQuotes: true, // q去掉模板中的双引号
      //     collapseWhitespace: true, // 一行显示
      //   },
    }),
  ],
```



## 处理css

版本:  `"mini-css-extract-plugin": "^0.9.0"`,  

作用： 将css抽离到一个文件中



```js
// 注意loader使用顺序
module: {
    rules: [
      // 处理css内容，
      //   css-loader解析 @import 的语法
      // style-loader 把css插入到head标签中
      {
        test: /\.css$/,
        use: [
          // 如果使用MiniCssExtractPlugin处理，就不用 style-loader 进行处理
          MiniCssExtractPlugin.loader,
          // 如果loader需要传递参数或者有额外的配置，可以使用对象的写法，如果没有就直接写成字符串
          //   {
          //     loader: 'style-loader',
          //   },
          'css-loader',
          'postcss-loader',
        ],
      },
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          // 如果loader需要传递参数或者有额外的配置，可以使用对象的写法，如果没有就直接写成字符串
          //   {
          //     loader: 'style-loader',
          //   },
          'css-loader',
          'postcss-loader',
          'less-loader', // 将less转成css
        ],
      },
    ],
  },
    
plugins: [
    new MiniCssExtractPlugin({
      //   linkType: 'text/css',
      filename: 'main.css',
    }),
  ],
```



### 配置浏览器前缀

安装如下:

```js
"postcss": "^8.4.6",
"postcss-loader": "^4.0.4",
"autoprefixer": "^10.4.2",
```

1、添加`postcss.config.js`

```js
module.exports = {
  plugins: [require('autoprefixer')],
}
```

2、`package.json`中添加

```js
"browserslist": [
    "last 2 versions",
    "> 1%",
    "iOS 7",
    "last 3 iOS versions"
]
```



### 压缩css

版本： `"optimize-css-assets-webpack-plugin": "^4.0.0",`

```js
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')

plugins: [
    new OptimizeCssAssetsPlugin(),
],
```





## es6转es5

>  "@babel/core": "^7.16.12",
>
>  "@babel/preset-env": "^7.16.11",
>
>  "@babel/plugin-proposal-class-properties": "^7.13.0",
>
>  "@babel/plugin-proposal-decorators": "^7.13.5",
>
>  "@babel/plugin-transform-runtime": "^7.13.10",



```js
{
  test: /\.js$/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: [['@babel/preset-env', { targets: 'defaults' }]],
      plugins: [
        ['@babel/plugin-proposal-decorators', { legacy: true }], // 解析类的装饰器
        ['@babel/plugin-proposal-class-properties', { loose: true }], // 转化类的高级语法
        // '@babel/plugin-transform-runtime', // js语法检测及校验
      ],
    },
  },
  include: path.resolve(__dirname, 'src'),
},
```





## 全局变量引入

`src/index.js`

```js
import $ from "jquery";
```



`webpack.config.js`

```js
module.exports = {
  module: {
    rules: [
      {
        test: require.resolve("jquery"),
        loader: "expose-loader",
        options: {
          exposes: ["$", "jQuery"],
        },
      },
    ],
  },
};
```



> https://v4.webpack.js.org/loaders/expose-loader/



每个模块中都注入 $

```js
const webpack = require('webpack')

plugins:[
  // 在每个模块中都注入 $
  new webpack.ProvidePlugin({
  	$:'jquery'
  }),
]
```





## 打包图片

### 1、在js中创建图片来引入

```js
let image = new Image()

image.src = require('./img/prototype.png')

document.body.appendChild(image)
```



```js
 {
    test: /\.(png|jpe?g|gif)$/i,
    use: [
      {
        loader: 'file-loader',
        options: {
          name: "[name]_[hash:8].[ext]",
          // publicPath: "https://www.baidu.com"
        }
      },
      {
        // 用 url-loader 处理图片
        loader: 'url-loader', // url-loader 依赖于  file-loader 要使用url-loader必须安装file-loader
        options: {
          name: '[name].[hash:16].[ext]', // 文件名.hash.文件扩展名 默认格式为[hash].[ext]，没有文件名
          limit: 1024 * 8, // 将小于8KB的图片转换成base64的格式
          outputPath: 'assets/imgs', // 为你的文件配置自定义 output 输出目录 ; 用来处理图片路径问题
          publicPath: 'http://www.baidu.com', // 为你的文件配置自定义 public 发布目录 ; 用来处理图片路径问题
        },
      },
    ],
  },
```



### 2、在css中使用background:url('')

background: url('a.png') 会被css- loader处理成 background: url(require('a.png'))



### 3、`<img src="" />` 

版本： `"html-withimg-loader": "^0.1.16",`

```js
{
  test: /\.(htm|html)$/i,
  loader: 'html-withimg-loader',
},
```

需要将修改 `file-loader` 的配置

```js
 {
    loader: 'file-loader',
    options: {
      name: '[name]_[hash:8].[ext]',
      outputPath: 'img/',
      esModule: false,  // 添加此项
    },
  },
```







## 配置source-map

```js
devtool:"source-map", // 增加印射文件，帮助调试源代码
```



## 配置watch

```js
watch:true,
watchOptions: {
  poll: 1000, // 每秒问我1000次 是否需要更新
  aggregateTimeout?: 500, // 防抖 输入代码的时候不触发
  ignored: 'node_modules',
},
```





## clean-webpack-plugin

清理每次打包的文件，让每次打包的文件都是最新的

`npm install --save-dev clean-webpack-plugin`

```
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const webpackConfig = {
    plugins: [
        new CleanWebpackPlugin(),
    ],
};

module.exports = webpackConfig;
```





## copy-webpack-plugin

拷贝文件到打包后的目录

`npm install copy-webpack-plugin@5.1.1 --save-dev`

```js
const CopyPlugin = require("copy-webpack-plugin");

module.exports = {
  plugins: [
    new CopyPlugin(
      [
        { from: './doc', to: './dist' },
      ],
    ),
  ],
};
```







## webpack.BannerPlugin

Webpack内置版权插件

```
new webpack.BannerPlugin('make by yxh')
```

![](https://qn.huat.xyz/mac/20220202163854.png)





## 优化



### 忽略moment中的语言文件

```
new webpack.IgnorePlugin(/\.\/locale/,/moment/) // 过滤掉moment中的多语言
```



### 动态链接库

https://www.bilibili.com/video/BV1YA411T7mC?p=1



### 多线程打包

https://www.bilibili.com/video/BV1YA411T7mC?p=2&spm_id_from=pageDriver