目录
写在前面（webpack四大核心）
entry(入口）
entry是一切的起点，同故宫import告诉webpack引用了哪些模块
// index.js
import module from './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:[
new webpack.ProgressPlugin(), //打包进度报告
new HtmlWebpackPlugin()
]
}
output（出口）
顾名思义就是打包后导出的文件在哪
webpack打包vue项目
初始化项目
//初始化项目 创建一个package.json
npm init -y
//安装webpack -D表示安装的是开发依赖
npm i webpack -D
//创建一个html模板
mkdir public && cd public
//存放开发文件
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');
function resolve(dir) {
return path.resolve(__dirname, dir)
}
module.exports = {
//环境：生产环境：production 开发环境：development
mode: '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: [
new webpack.ProgressPlugin(), //打包进度报告
//自动生成index.hrml文件
new HtmlWebpackPlugin({
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.js
const {
VueLoaderPlugin } = require('vue-loader');
module.exports ={
// ...其他配置
module: {
rules: [
{
test: /.vue$/,//正则表达式，匹配以.vue结尾的文件
loader: 'vue-loader'
}
]
},
plugins: [
//...其他插件
// 请确保引入这个插件！
new VueLoaderPlugin()
]
}
这个基本的配置就已经打包成功了，这里可以通过安装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: [
//...其他插件
new ProgressBarPlugin()
]
打包输出指定文件夹
通过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_modules
use: {
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: [
new TerserWebpackPlugin()
]
},
压缩图片
安装：
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: [new HtmlWebpackPlugin()]
压缩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:[
new OptimizeCssAssetsWebpackPlugin(),
new MiniCssExtractPlugin({
filename: 'css/[name].css'
})
]
完整代码
// webpack.config.js
const path = require('path');
const webpack = require('webpack');
const {
VueLoaderPlugin } = require('vue-loader');
const HtmlWebpackPlugin = require('html-webpack-plugin');
function resolve(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: [
// 请确保引入这个插件！
new VueLoaderPlugin(),
// new ProgressBarPlugin(), // 花里胡哨的进度条
new webpack.ProgressPlugin(), //打包进度报告
new HtmlWebpackPlugin({
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')
}
},
}