webpack.config.js文件：
/*
* @Author: Liudan
* @Date: 2021-08-24 17:26:04
* @Descripttion:
* @LastEditors: liudan
* @LastEditTime: 2021-09-17 15:56:06
*/
// webpack优点：当同一张图片被多次引用，他只会打包一次该图片，不会打包多次该文件
//npx webpack-dev-server 只会在内存中编译打包，没有输出
//webpcak 会将打包结果输出出去
//用来拼接绝对路径的方法
const { resolve } = require('path')
//插件 需要先下载 再注册使用
const HtmlWebpackPlugin = require('html-webpack-plugin') //是一个构造函数，所以要new可以用
const webpack = require('webpack')
module.exports = {
entry: './src/index.js', //入口文件
output: {
//只决定了入口文件的输出路径
filename: 'js/built.js', //如口文件的输出文件名称 包括css文件都会打包到该路径下
path: resolve(__dirname, 'build') //输出文件名称及路径 __dirname 是nodejs的变量，代表当前文件的绝对路径+/第二个参数
},
//lodar的配置
module: {
rules: [
//详细的loader配置
{
//处理css资源
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
//处理less资源
test: /\.less$/, //以.lss结尾的文件
//使用哪些loader进行处理 （多个loader处理）
use: [
//执行顺序：从下到上 ，从右到左
//创建style标签，将js中的样式资源插入进去，添加到head中生效
'style-loader',
//将css文件变成CommonJS模块加载到js中，里面的内容是样式字符串
'css-loader',
//将less文件解析成css文件
'less-loader'
]
},
{
//处理图片资源
//问题：默认处理不了html中直接通过img标签引入的图片
//需要下载url-loader 和file-loader 因为 url-loader是依赖于file-loader的
//官方文档中显示url-loader等是旧的assets loader，会导致资源重复，需要加上type：'javascript/auto' 设置assets类型解决
//webpack5使用4个资源模型代替所有处理资源loader
test: /\.(jpg|png|gif)$/,
//只使用一个loader处理
loader: 'url-loader', //在file-loader的基础上做了优化
options: {
//loader中的配置
limit: 8 * 1024, //图片小于8kb，就会被base64处理 优点：从而减少请求数量（减轻服务器的压力）缺点：图片体积会更大（文件请求速度更慢）
esModule: false, //关闭es6module 使用commonjs
name: '[hash:10].[ext]', //给打包完后的图片名称做限制，[hash:10]取图片的前10位hash值，[ext]取文件的原来的扩展名（.png .jpg .gif)
outputPath: 'img' //将图片文件输出到build/img目录下
}
},
//问题，因为url-loader默认使用es6模块化解析，而html-loader引入图片是CommonJS，所以解析时就会报错img中src会变成[object Module]
//解决：关闭url-loader的es6模块化，使用CommonJS解析：esModule:false
{
//处理html文件中的img资源
test: /\.html$/,
//处理.html文件中的img图片（负责引入img，从而能被url-loader进行处理）
loader: 'html-loader'
},
{
//打包其他资源 排除css，js，html以外的资源
exclude: /\.(css|js|html)$/,
loader: 'file-loader',
options: {
name: '[hash:10].[ext]',
outputPath: 'media' //将图片文件输出到build/media目录下
}
}
]
},
mode: 'development',
//插件
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'
})
],
//开发服务器 devserver：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）
//特点：只会在内存中编译打包，不会有任何输出
//启用devserver指令为：npx webpack-dev-server 所以要下载webpack-dev-server npm i webpack-dev-server
//当ctrl+s保存后会自动编译，并打开浏览器页面展现最新的代码
devServer: {
contentBase: resolve(__dirname, 'build'), //打包路径
compress: true, //启动gzip压缩
port: 3000, //指定端口号
open: true //自动打开本地默认浏览器
}
}
