课程名称：前端工程师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']
})
]