目录
写在前面（webpack四大核心）
entry(入口）
entry是一切的起点，同故宫import告诉webpack引用了哪些模块
// index.jsimport modulefrom'./module'import'./index.css'import'./index.scss'module()
console.log(2222)loader（加载器）
如果将非js文件当作模块引用进来的时候，webpack是不具备转换非js文件的功能的，这时可以通过loader把css,scss进行转换，loader是从上到下，从右到左编译的。
// webpack.config.js
module.exports={mode:'development',entry:'./src/index.js',output:{path: __dirname+'/dist'},module:{rules:[{test:/\.css$/,use:['style-loader','css-loader']},{test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}]}}plugin（插件）
plugin主要是对loader的一个扩展，通过html-webpack-plugin打包后会创建html文件。
插件目的在于解决 [loader]无法实现的其他事情
const HtmlWebpackPlugin=require('html-webpack-plugin')const webpack=require('webpack')
module.exports={mode:'development',entry:'./src/index.js',output:{path: __dirname+'/dist'},module:{rules:[{test:/\.css$/,use:['style-loader','css-loader']},{test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},{test:/\.html$/i,loader:"html-loader",},{test:/\.md$/i,use:["html-loader",'markdown-loader'],},]},plugins:[newwebpack.ProgressPlugin(),//打包进度报告newHtmlWebpackPlugin()]}output（出口）
顾名思义就是打包后导出的文件在哪
webpack打包vue项目
初始化项目
//初始化项目 创建一个package.json
npm init-y//安装webpack -D表示安装的是开发依赖
npm i webpack-D//创建一个html模板
mkdirpublic&& cdpublic//存放开发文件
mkdir src&& cd src目录结构为
webpack-demo|--public # 静态资源|--index.html # html模板|-- src|-- main.js # webpack入口文件|-- webpack.config.js在项目根目录新建webpack.config.js
先配置一些基本的东西
// webpack.config.js// 加上这个vscode会有提示/** @type {import('webpack').Configuration} */const path=require('path');const webpack=require('webpack');functionresolve(dir){return path.resolve(__dirname, dir)}
module.exports={//环境：生产环境：production 开发环境：developmentmode:'development',devtool:'inline-source-map',// 提示哪行错误//入口文件entry:'./src/main.js',//输出文件output:{//输出路径，path.resolve获取一个绝对路径path:path.resolve( __dirname+'/dist'),//输出文件名filename:'static/js/[name].[contenthash].js',//打包时是否清除之前生成的文件（整个dist文件夹）clean:true},//插件：plugins:[newwebpack.ProgressPlugin(),//打包进度报告//自动生成index.hrml文件newHtmlWebpackPlugin({template:'./public/index.html'})]}基本配置写好后，就可以开始在src里面写vue的代码了，这里需要npm i vue安装好需要的开发的工具，然后写好后我们来配置一下解析vue相关的内容，前面提到的重中之重，也就是核心vue-loader
vue-loader
Vue Loader 是一个webpack的loader，它允许你以一种名为单文件组件 (SFCs)的格式撰写Vue 组件。
安装：
npm i vue-loader vue-template-compiler-D配置：
// webpack.config.jsconst{ VueLoaderPlugin}=require('vue-loader');
module.exports={// ...其他配置module:{rules:[{test:/.vue$/,//正则表达式，匹配以.vue结尾的文件loader:'vue-loader'}]},plugins:[//...其他插件// 请确保引入这个插件！newVueLoaderPlugin()]}这个基本的配置就已经打包成功了，这里可以通过安装webpack-dev-server开启一个服务器看看效果
webpack-dev-server（配置开发服务器）
安装：
npm install webpack-dev-server-D给package.json添加配置：
"scripts":{"build":"webpack","dev":"webpack serve --open"},在webpack.config.js添加devServer配置
// webpack.config.js
module.exports={// ...其他配置devServer:{static:'./dist',// 开启的目标文件hot:true,// 开启热更新open:true//自动开启浏览器}}在这里一个基本的打包，构建已经完成了，我们再来加点东西。
加载css sass文件
安装：css-loader sass-loader sass
npm i css-loader style-loader sass-loader sass-D配置：
module:{rules:[// ...其他配置{test:/\.scss$/,use:['vue-style-loader','css-loader','sass-loader']},{test:/\.css$/,use:['vue-style-loader','css-loader']}]}加载图片
webpack5里面内置了解析图片类型的，所以不需要我们额外安装其他loader
module:{rules:[// ...其他配置{test:/\.(png|jpg|gif)$/i,type:'asset/resource',}]}加载图片
module:{rules:[// ...其他配置{test:/\.(woff|woff2|eot|ttf|otf)$/i,type:'asset/resource'},]}使用别名
如果使用@/view/index这种文件路径的需要设置别名
resolve:{alias:{'@':resolve('src')}}extensions省略文件路径
通过extensions可以不用写文件后缀
resolve:{// ...其他配置extensions:['.js','.json','.vue','css']}proxy代理
在开发环境中可以通过proxy处理跨域
devServer:{// ...其他配置proxy:{'/api':{target:'https://xxx.xxx',changeOrigin:true// 这个必须要写}},},优化
美化打包进度条
安装：
npm i progress-bar-webpack-plugin-D配置：
const ProgressBarPlugin=require('progress-bar-webpack-plugin')plugins:[//...其他插件newProgressBarPlugin()]打包输出指定文件夹
通过type:'asset/resource'打包到指定文件夹里面，这个相当于file-loader，可以通过generator设置打包路径
配置：
module:{rules:[// ...其他配置{type:'asset/resource',generator:{filename:'static/文件夹名称/[hash][ext][query]'}}]es6转es5
安装：babel-loader
npm i babel-loader @babel/core @babel/preset-env-D配置：
module:{rules:[// ...其他配置{test:/\.js$/,exclude:/node_modules/,// 除去 node_modulesuse:{loader:'babel-loader',options:{presets:['@babel/preset-env']// 预设}}},]压缩
将css，js，图片等进行压缩处理，减少包体积
压缩js
安装：
npm install terser-webpack-plugin-D配置：
const TerserWebpackPlugin=require('terser-webpack-plugin');optimization:{minimize:true,minimizer:[newTerserWebpackPlugin()]},压缩图片
安装：
npm install image-webpack-loader-D配置：
test:/\.(png|jpg)$/,use:[{loader:'image-webpack-loader',options:{mozjpeg:{progressive:true,},optipng:{enabled:false,},pngquant:{quality:[0.65,0.90],speed:4},gifsicle:{interlaced:false,},webp:{quality:75}}}]quality 属性配置的值越大，那么图片将会被压缩的越小那么图片的清晰度也会随之变模糊
压缩html
安装：
npm install--save-dev html-webpack-plugin配置：
const HtmlWebpackPlugin=require('html-webpack-plugin');plugins:[newHtmlWebpackPlugin()]压缩css
安装：
npm install mini-css-extract-plugin optimize-css-assets-webpack-plugin-D配置：
const MiniCssExtractPlugin=require('mini-css-extract-plugin');const OptimizeCssAssetsWebpackPlugin=require('optimize-css-assets-webpack-plugin');plugins:[newOptimizeCssAssetsWebpackPlugin(),newMiniCssExtractPlugin({filename:'css/[name].css'})]完整代码
// webpack.config.jsconst path=require('path');const webpack=require('webpack');const{ VueLoaderPlugin}=require('vue-loader');const HtmlWebpackPlugin=require('html-webpack-plugin');functionresolve(dir){return path.resolve(__dirname, dir)}
module.exports={mode:'development',entry:'./src/main.js',output:{path: __dirname+'/dist',filename:'static/js/[name].[contenthash].js',clean:true,},module:{rules:[{test:/\.vue$/,loader:'vue-loader'},{test:/\.js$/,exclude:/node_modules/,use:{loader:'babel-loader',options:{presets:['@babel/preset-env']}}},{test:/\.scss$/i,use:['vue-style-loader','css-loader','sass-loader']},{test:/\.css$/i,use:['vue-style-loader','css-loader'],},{test:/\.(png|jpg|gif)$/i,type:'asset/resource',generator:{filename:'static/img/[hash][ext][query]'},},{test:/\.(woff|woff2|eot|ttf|otf)$/i,type:'asset/resource',generator:{filename:'static/fonts/[hash][ext][query]'},},],},plugins:[// 请确保引入这个插件！newVueLoaderPlugin(),// new ProgressBarPlugin(), // 花里胡哨的进度条newwebpack.ProgressPlugin(),//打包进度报告newHtmlWebpackPlugin({template:'./public/index.html'})],devServer:{static:'./dist',hot:true,proxy:{'/api':{target:'http://xxx.xxx',changeOrigin:true}},},resolve:{extensions:['.js','.json','.vue','css'],alias:{'@':resolve('src')}},}