# webpackTest

**Repository Path**: loveyingshi/webpackTest

## Basic Information

- **Project Name**: webpackTest
- **Description**: webpack的使用
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2020-05-12
- **Last Updated**: 2021-02-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# webpack 学习之旅

## Loader 实现资源加载

加载顺序为从后到前

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

## 插件的使用

[clean-webpack-plugin] 每次清除之前所 build 生成的文件

[html-webpack-plugin] 创建 html 入口

[HotModuleReplacementPlugin] 模块热替换插件

[mini-css-extract-plugin] 使用 MiniCssExtractPlugin 中提供的 loader 去替换掉 style-loader,打包过后，样式就会存放在独立的文件中，直接通过 link 标签引入页面。

[optimize-css-assets-webpack-plugin] 压缩 css, 这种压缩插件，应该我们配置到 minimizer 中，便于 minimize 选项的统一控制。然而原本可以自动压缩的 JS，现在却不能压缩了。

那这是因为我们设置了 minimizer，Webpack 认为我们需要使用自定义压缩器插件，那内部的 JS 压缩器就会被覆盖掉。我们必须手动再添加回来。

## 多种配置类型

webpack.common.js 开发环境和生产环境的共同配置

使用 webpack-merge 合并 webpack 配置文件

用于生成生产环境以及开发环境的配置

## dev Server 提高开发效率

[webpack-dev-server] Webpack 配置对象中可以有一个叫作 devServer 的属性，专门用来为 webpack-dev-server 提供配置

```
devServer: {
  contentBase: "./dist",
  port: 8080,
  hot: true
},
```

## webpack SourceMap 调试代码

- inline-source-map 模式
  它跟普通的 source-map 效果相同，只不过这种模式下 Source Map 文件不是以物理文件存在，而是以 data URLs 的方式出现在代码中。我们前面遇到的 eval-source-map 也是这种 inline 的方式。

- hidden-source-map 模式
  在这个模式下，我们在开发工具中看不到 Source Map 的效果，但是它也确实生成了 Source Map 文件，这就跟 jQuery 一样，虽然生成了 Source Map 文件，但是代码中并没有引用对应的 Source Map 文件，开发者可以自己选择使用。

- nosources-source-map 模式：
  在这个模式下，我们能看到错误出现的位置（包含行列位置），但是点进去却看不到源代码。这是为了保护源代码在生产环境中不暴露。

```
const config = {
  entry: "./src/index.js",
  ...
  devtool: "inline-source-map",
  ...
}
```

## hints

performance.hints
false | "error" | "warning"

打开/关闭提示。此外，当找到提示时，告诉 webpack 抛出一个错误或警告。此属性默认设置为 "warning"。

```
module.exports = {
  //...
  performance: {
    hints: false
  }
};
```

## Tree Shaking

如果把我们的代码看成一棵大树，那你可以这样理解：

- usedExports 的作用就是标记树上哪些是枯树枝、枯树叶；
- minimize 的作用就是负责把枯树枝、枯树叶摇下来。

```
// ./webpack.config.js
module.exports = {
  // ... 其他配置项
  optimization: {
    // 模块只导出被使用的成员
    usedExports: true,
    // 压缩输出结果
    minimize: true
  }
}
```

## sideEffects 作用

Tree-shaking 只能移除没有用到的代码成员，而想要完整移除没有用到的模块，那就需要开启 sideEffects 特性了

```
// ./webpack.config.js
module.exports = {
  mode: 'none',
  entry: './src/main.js',
  output: {
    filename: 'bundle.js'
  },
  optimization: {
    sideEffects: true
  }
}
```

## Code Splitting

把打包的结果按照一定的规则分离到多个 bundle 中，然后根据应用的运行需要按需加载。这样就可以降低启动成本，提高响应速度

Webpack 实现分包的方式主要有两种：

- 根据业务不同配置多个打包入口，输出多个打包结果；
- 结合 ES Modules 的动态导入（Dynamic Imports）特性，按需加载模块。

```
// ./webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry: {
    index: './src/index.js',
    album: './src/album.js'
  },
  output: {
    filename: '[name].bundle.js' // [name] 是入口名称
  },
  // ... 其他配置
  plugins: [
    new HtmlWebpackPlugin({
      title: 'Multi Entry',
      template: './src/index.html',
      filename: 'index.html',
      chunks: ['index'] // 指定使用 index.bundle.js
    }),
    new HtmlWebpackPlugin({
      title: 'Multi Entry',
      template: './src/album.html',
      filename: 'album.html',
      chunks: ['album'] // 指定使用 album.bundle.js
    })
  ]
}
```

## Define Plugin

DefinePlugin 是用来为我们代码中注入全局成员的

```
// ./webpack.config.js
const webpack = require('webpack')
module.exports = {
  // ... 其他配置
  plugins: [
    new webpack.DefinePlugin({
      // 值要求的是一个代码片段
      API_BASE_URL: JSON.stringify('https://api.example.com')
    })
  ]
}
```