# webpack

**Repository Path**: com_hike_wang/webpack

## 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**: 2022-01-27
- **Last Updated**: 2022-02-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# <center>webpack学习
## 一、source-map
* 语法代码
```
config.devtool: 'inline-source-map',
```
* 作用是起到代码的映射作用如下图
![map](public/source-map.png)
## 二、资源模块
1. asset/resource
* 语法代码
```
{
    test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
    type: 'asset/resource',
},
```
* index.js文件代码
```
import imgsrc from './assets/garden.png'
const img = document.createElement('img');
img.src = imgsrc;
img.style.height = '400px';
img.style.width = '855px';
img.style.margin = '0px 255px';
document.body.appendChild(img);
```
* 生成的dist文件夹
![asset-resoure](public/asset-resoure.png)
* 资源模块输出名
   * 通过配置output参数修改输出名，[name]|[contenthash],name的名字是根据entry文件入口描述的key值确定的，contenthash是根据内容自动生成hash值
   ```
   output: {
        path: path.resolve(__dirname, 'dist'),
        clean: true,
        assetModuleFilename: 'img/[contenthash:10][ext][query]'
    },
   ```
   * 也可以在config.module.rules中进行配置文件输出名,并且此处配置的优先级高于output中配置的
```
{
    test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
                type: 'asset/resource',
                generator: {
                    filename: 'img/[contenthash][ext][query]'
                }
},
```

2. asset/inline
* 作用是用于导出一个data:url资源,不会再生成静态资源，因此不可以设置输出名
* 语法代码
```
{
    test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
                type: 'asset/inline',
},
```
* 生成结果
![asset-inline](public/asset-inline.png)


3. asset/source
* 作用是导出文本文件,不会生成新的文件,不设置输出名
* 语法代码
```
{
    test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif|txt)$/i,
    type: 'asset/source',
},
```
4. asset会自动根据内容再resource和inline之间进行选择
---
* conslusion：
![concluson-asset](public/concluson-asset.png)

## 三、css抽离和压缩
1. 抽离css
首先，你需要安装 mini-css-extract-plugin：
```
npm install --save-dev mini-css-extract-plugin
```
建议 mini-css-extract-plugin 与 css-loader 一起使用。
之后将 loader 与 plugin 添加到你的 webpack 配置文件中。 例如：
* style.css
```
body {
  background: green;
}
```
* component.js
```
import "./style.css";
```
* webpack.config.js
```
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
};
```
2. 这个插件使用 cssnano 优化和压缩 CSS
就像 optimize-css-assets-webpack-plugin 一样，但source-maps 和 assets 中使用查询字符串会更加准确，支持缓存和并发模式下运行。
* 首先，你需要安装 css-minimizer-webpack-plugin
```
npm install css-minimizer-webpack-plugin --save-dev
```
* 接着在 webpack 配置中加入该插件。示例：
```
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /.s?css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
    ],
  },
  optimization: {
    minimizer: [
      // 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 `terser-webpack-plugin`），将下一行取消注释
      // `...`,
      new CssMinimizerPlugin(),
    ],
  },
  plugins: [new MiniCssExtractPlugin()],
};
```
这将仅在生产环境开启 CSS 优化。如果还想在开发环境下启用 CSS 优化，请将 optimization.minimize 设置为 true:
```
module.exports = {
  optimization: {
    // [...]
    minimize: true,
  },
};
```
## 四、字体图标库
1. iconfont下载字体图标库
![font-img](public/font-img.png)
2. index.css
```
@font-face {
    font-family: "iconfont logo";
    src: url('../assets/iconfont.ttf');
    src: url('../assets/iconfont.ttf') format('truetype');
}

.heart {
    font-family: "iconfont logo";
    font-size: 160px;
    font-style: normal;
    color: red;
}
```
3. index.html
```
<span class="heart">&#xe721;</span>
```
---
    * 注意在assets文件夹中添加.ttf文件

## 五、代码分离
1. Dependencies
默认情况下，每个入口 chunk 保存了全部其用的模块(modules)。使用 dependOn 选项你可以与另一个入口 chunk 共享模块:
```
module.exports = {
  //...
  entry: {
    app: { import: './app.js', dependOn: 'react-vendors' },
    'react-vendors': ['react', 'react-dom', 'prop-types'],
  },
};
```
app 这个 chunk 就不会包含 react-vendors 拥有的模块了.dependOn 选项的也可以为字符串数组：
```
module.exports = {
  //...
  entry: {
    moment: { import: 'moment-mini', runtime: 'runtime' },
    reactvendors: { import: ['react', 'react-dom'], runtime: 'runtime' },
    testapp: {
      import: './wwwroot/component/TestApp.tsx',
      dependOn: ['reactvendors', 'moment'],
    },
  },
};
```
此外，你还可以使用数组为每个入口指定多个文件：
```
module.exports = {
  //...
  entry: {
    app: { import: ['./app.js', './app2.js'], dependOn: 'react-vendors' },
    'react-vendors': ['react', 'react-dom', 'prop-types'],
  },
};
```
* config代码
```
entry: {
        index: {
            import: './src/index.js',
            filename: 'javascript/[contenthash:10][name].js',
            dependOn: 'shared',
        },
        shared: ['jquery', 'vue'],
    },
```
* index.js代码
```
import $ from 'jquery'
console.log($)
import Vue from 'vue/dist/vue.js'
console.log(Vue);
```
2. 动态导入
当涉及到动态导入时，webpack推荐使用ECMAscript提案的import()方法，方法返回的promise对象。
```
function getComponent() {
    return import ( /*webpackChunkName:'/javascript/jquery'*/ 'jquery')
        .then(({ default: $ }) => {
            return $
        })
}
getComponent().then(value => {
    console.log(value);
})
```
3. 懒加载
当动态导入时，通过函数导入就是懒加载
```
botton.addEvenListener('click',()=>{
 import ( /*webpackChunkName:'/javascript/jquery'*/ 'jquery')
        .then(({ default: $ }) => {
            return $
        })
})
```