【学习打卡】第3天 前端工程师2022版 webpack 第二讲

课程名称：前端工程师2022版

课程章节： webpack入门

主讲老师：elex

课程内容：

今天学习的内容包括：

webpack核心？什么是 plugins？

课程收获：

entry    入口，指定入口文件

    1. entry: './src/index.js'    单入口

    2. entry: {

            main: './src/index.js'

            search: './src/search.js'

        }

output    出口

    1. path: path.resolve(__dirname, 'dist')    输出文件夹

        path.resolve(__dirname, 'dist')    拼接内部地址，并格式化地址的方法

            __dirname    node 的根目录    

    2. filename: 'bundle.js'    输出文件名

        filename: '[name].js'    动态命名文件输出，推荐
        
        

什么是 plugins

1.插件

2.loader 被用于帮助 webpack 处理各种模块，而插件则可以用于执行范围更广的任务

3.其他插件 https://www.webpackjs.com/plugins/

html-webpack-plugin

1.安装html-webpack-plugin

  npm install --save-dev html-webpack-plugin@4.3.0

2.配置 html-webpack-plugin 插件

  在webpack.config.js中

头部添加const   HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports添加

      plugins: [

    // 单入口

    new HtmlWebpackPlugin({

     template: './index.html'（源码文件）

    })

    // 多页面时 html-webpack-plugin 插件的配置

    new HtmlWebpackPlugin({

      template: './index.html',

      filename: 'index.html',

      chunks: ['index'],

      // html-webpack-plugin 插件的其他功能

      minify: {

        // 删除 index.html 中的注释

        removeComments: true,

        // 删除 index.html 中的空格

        collapseWhitespace: true,

        // 删除各种 html 标签属性值的双引号

        removeAttributeQuotes: true

      }

    }),

    new HtmlWebpackPlugin({

      template: './search.html',

      filename: 'search.html',

      chunks: ['search']

    })

  ]