const path = require('path');
// 引入node核心模块用来拿到当前文件的绝对路径
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 安装 npm install --save-dev html-webpack-plugin
// 这个插件用来生成html文件,会帮你自动引入要打包的js,无需自动引入
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
// 安装 npm install mini-css-extract-plugin -D
// 这个插件帮助我们来实现css代码的抽离
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
// 安装 npm install css-minimizer-webpack-plugin -D
// 这个插件帮助我们来实现css代码的压缩
module.exports = {
// 模块导出里面写webpack.config
mode: 'production',
// 模式(在什么环境下进行打包)
// development : 开发模式。此时产生的代码(dist/main.js) 还是可以读的，体积很大
// production: 生产模式。它会自动启用 webpack 内部的一些优化措施，例如：压缩，混淆，加密.......， 总之是让代码不可读，不可还原
entry: {
index: './src/index.js',
}, //入口文件
// 配置入口(从哪里开始解析)
output: {
filename: 'buird.js', //出口文件名字默认叫main.js
// 文件名
path: path.join(__dirname, 'dist'),
// 设置出口文件夹的位置(这个位置必须是绝对路径所以引入node中的path用path.join(__dirname)来拿到当前文件的绝对路径)
clean: true,
// 清除上次打包的内容
assetModuleFilename: 'images/[contenthash][ext]',
// 设置资源模块的路径和文件名
// 第一个[]是资源名第二个[]就是资源扩展名
// contenthash就是根据文件的内容生成一个hash(哈希)的字符串
// ext就是使用原资源的扩展名
},
// 配置出口
devtool: 'inline-source-map',
// 用webpage打包的项目报错只会定位到打包后的文件中,设置devtool:'inline-source-map'可以将错误直接定位在打包前的源文件中
// 并且可以在打包的js中直观的看到我们打包前的源代码
plugins: [
new HtmlWebpackPlugin({
template: './index.html',
// template模板 关联 基于根目录下的src文件夹下index.html模板去生成打包的html
filename: 'app.html',
// 文件名 打包出来html的文件名
inject: 'body',
// 设置在html哪里生成script标签
}),
// 使用这个插件用来生成html文件,会帮你自动引入要打包的js,无需自动引入
new MiniCssExtractPlugin({
filename: 'styles/[contenthash].css',
// 文件名 提取出来的css路径和名字
}),
// 使用这个插件会将css提取到单独的文件中，为每个包含css的js文件创建一个css文件
],
// plugins插件 工具
devServer: {
static: path.join(__dirname, './dist'),
// 指向基于的物理路径(输出dist打包文件到服务器上)
port: '8888',
// 端口号
host: 'localhost',
// 开发运行时域名，设置成'0.0.0.0',在同一个局域网下,如果你的项目在运行，同时可以通过你的http://ip:port/...访问你的项目
open: true,
// 默认是否打开浏览器
},
// webpackDevServer(开发服务器)并没有输出任何的物理文件，他把输出的打包文件放在内存里面，删除打包文件依然可以正常的运行
module: {
rules: [
{
// rules里面配置规则
test: /\.png$/,
// test正则验证(验证规则在哪里生效)
type: 'asset/resource',
// type配置资源类型
// resource会导出图片,并绑定导出图片的url
generator: {
filename: 'images/[contenthash][ext]',
},
// generator里面来设置资源模块的路径和文件名
},
{
test: /\.jpg$/,
// 正则
type: 'asset/inline',
// 配置资源类型
// inline不会导出图片，绑定的是Date URL base64的格式
},
{
test: /\.txt$/,
// 正则
type: 'asset/source',
// 配置资源类型
// source用于导出资源中的源代码
},
{
test: /\.gif$/,
type: 'asset',
// 配置资源类型
// asset是通用资源类型在resource和inline之前按照大小去做出选择
parser: {
dataUrlCondition: {
maxSize: 4 * 1024 * 1024,
},
// 设置当图片大于maxSize值的时候采取resource小于则采取inlne
},
// parser解析器
},
{
test: /\.css$/,
// use:['style-loader','css-loader']
// 用css-loader让webpage去解析css,用styleloader把css挂载到页面上
// 这个loader的顺序不能变，因为loader是从右往左执行，我们先要让webpack去解析css，然后再用style把css挂载到页面上使用
use: [MiniCssExtractPlugin.loader, 'css-loader'],
// 通过MiniCssExtractPlugin插件中的loader把css挂载到页面上,之后通过MiniCssExtractPlugin插件设置的把css给放在单独的文件中去
},
{
test: /\.js$/,
// 正则验证
exclude: /node_modules/,
// 排除 node_modules中的js
use: {
loader: 'babel-loader',
// 用babelLoader来解析js
options: {
// options来去配置参数
presets: ['@babel/preset-env'],
// presets配置预设
},
},
},
],
},
// 配置模块
optimization: {
minimizer: [
new CssMinimizerPlugin(),
// 使用CssMinimizerPlugin来实现css代码的压缩(mode必须是production)
],
// minimizer里面允许通过webpage插件去覆盖默认压缩工具
},
// 优化的配置
};