共计 4680 个字符，预计需要花费 12 分钟才能阅读完成。
纲要
1.webpack 的根本应用 (打包 js)
2. 拆分配置 (将配置文件拆分为三个: 根本配置, 生产配置, 开发配置, 省去打包前手动批改模式配置 ( 生产或开发)); 合并配置 (将生产, 或开发配置与根本配置合并, 应用 webpack-merge 插件实现)
3. 学习 webpack-dev-serve 的应用 (配置接口门路, 代码改变页面自动更新)
4.Webpack 打包 css(webpack 默认只能打包 js)
5.Webpack 解决图片
6. 多入口 (输入多个 html 文件)
1.webpack 最根本应用
1.webpack.config.js
const path =require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {mode:'development',// 模式, 不写默认为开发模式 ( 未压缩, 未删空格, 正文),'production'(生产模式)
entry:{ // 打包入口
main:'./src/index.js'
},
output:{// 打包输入
filename:'[name].js'// 打包输入文件名,[name] === main(入口文件)
path:path.resolve(_dirname,'dist')// 打包输入门路
},
plufins:[// 插件
new HtmlWebpackPlugin({template:'./src/index.html'})
]
}2.package.json
// 配置打包命令
{
"scripts":{"build":"webpack"}
}3. 执行打包 npm run build
2. 拆分, 合并配置
1.src 同级目录创立 build 文件夹
2. 新建 webpack.base.config.js 文件 // 根本配置
新建 webpack.dev.config.js 文件 // 开发配置
新建 webpack.prod.config.js 文件 // 生产配置
3.webpack.base.config.js
const path =require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry:{main:'./src/index.js'},
output:{filename:'[name].js'
path:path.resolve(_dirname,'dist')
},
plufins:[
new HtmlWebpackPlugin({template:'./src/index.html'})
]
}4.webpack.dev.config.js
const commonConfig =require('./webpack.base.consfig.js');// 引入根本配置
const {smart:merge} =require('webpack-merge')// 引入 webpack-merge 模块的 smart 办法 (用于合并)
const devConfig = {// 开发模式配置
mode:;'development'
}
module.exports =merge(commonConfig,devConfig)// 合并根本配置和开发配置 5.webpack.prod.config.js
const commonConfig =require('./webpack.base.consfig.js');// 引入根本配置
const {smart:merge} =require('webpack-merge')// 引入 webpack-merge 的 smart 办法 (用于合并)
const prodConfig = {// 生产模式配置
mode:;'production'
}
module.exports =merge(commonConfig,prodConfig)// 合并根本配置和生产配置 6.package.json
// 配置打包命令
{
"scripts":{
"build:dev":"webpack --config ./build/webpack.dev.config.js",
"build":"webpack --config ./build/webpack.prod.config.js",
}
}3.webpack-dev-serve 的应用
1. 实现代码改变页面自动更新
1.1.webpack.dev.config.js
const devConfig = {// 开发模式配置
mode:;'development',
devServer:{
port:8080,// 服务器启动端口 8080
contentBase:'./dist',// 服务器动态资源文件夹
progress:true,// 打包时显示进度条
open:true,// 启动服务器后, 主动关上浏览器
compress:true// 开启 gzip 压缩
}
}
1.2.package.json
// 配置打包命令
{
"scripts":{"dev":"webpack-dev-server --config ./build/webpack.dev.config.js"}
}2. 接口地址代理转发 (接口相对路径补全)
axios.get('/api/project/userinfo').then(res=>{})1.webpack.dev.config.js
const devConfig = {// 开发模式配置
mode:;'development',
devServer:{
port:8080,// 服务器启动端口 8080
contentBase:'./dist',// 服务器动态资源文件夹
progress:true,// 打包时显示进度条
open:true,// 启动服务器后, 主动关上浏览器
compress:true// 开启 gzip 压缩
},
proxy:{ // 代理
'/api/project':{ // 发送到 '/api/project' 的申请转发到 'http://baidu.com'
target:'http://baidu.com',
changeOrigin:true,
pathRewrite:{ // 门路重写, 假如你申请的门路对立写了 /api 结尾, 但但后盾接口没有, 则过滤掉
'^/api':''
}
}
}
}4.Webpack 打包 css(loader 执行程序由下往上)
1.webpack.base.config.js
module.exports = {
module:{
rules:[
{
test:/\.css&$/, // 程序
loader:[
'style-loader',// 将款式插入到页面 style 标签中 // 2
'css-loader'// 解决 css 文件之间的依赖关系, @import 款式引入关系 //1
]
}
],
rules:[...]
},
}2. 增加解决 css 兼容性 loader //’postcss-loader’
应用 'postcss-loader 页面渲染成果
transform:rotate(-45deg)
=>
-webkit-transform:rotate(-45deg)
transform:rotate(-45deg)1.webpack.base.config.js
module.exports = {
module:{
rules:[
{
test:/\.css&$/,
loader:[
'style-loader',// 将款式插入到页面 style 标签中
'css-loader'// 解决 css 文件之间的依赖关系, @import 款式引入关系
'postcss-loader' // 需装置 autoprefixer 插件
]
}
]
},
}2. 创立 postcss.config.js 文件
module.exports = {
plugins:[require('autoprefixer')
]
}3.package.json
// 在 "scriptrs" 同级增加
"browserslist":
[
"> 1%",
"last 2 versions"
]3. 增加预编译 loader - 略
5.Webpack 解决图片
比拟小的图片, 就转成 base64 格局, 能够缩小 http 申请
比拟大的图片, 仍然想 file-loader 一样, 独自打包到 img 文件夹中, 发申请获取, 避免页面首次渲染太慢
import img from './img/1.png'; //webpack 默认是解决不了的 1. 开发环境下应用 file-loader
file-loader 会将引入的图片放到 dist 目录下
//webpack.dev.config.js
module:{
rules:[
{test:/\.(png|jpg)$/,
loader:'file-loader'
}
]
}2. 生产环境下应用 url-loader 进行 base64 转码
//webpack.prod.config.js
module:{
rules:[
{test:/\.(png|jpg)$/,
use:{
loader:'url-loader',
options:{
limit:5*1024, // 小于 5kb 就转码
outputPath:'/img/' // 大图打包到 dist/img 文件夹中
}
}
}
]
}6. 多入口
//webpack.base.config.js
entry:{
index:'./src/index.js',
other:'./src/other.js'
},
plugins:[
new HtmlWebpackPlugin({
template:'./src/index.html',
filename:'index.html',
chunks:['index']
}),
new HtmlWebpackPlugin({
template:'./src/other.html',
filename:'other.html',
chunks:['other']
}),
]7. 抽离 css
上述打包后的 css 代码, 没有独自打包成一个 css 文件, 而是打包在了 main.js 中, 并通过插入到了页面 style 标签中的形式引入, 当初我要实现打包成一个 css 文件,link 办法引入
//webpack.prod.config.js
const MiniCSSExtractPlugin =require('mini-css-extract-plugin');// 用来打包生成 css 文件
const TerserPlugin = require('terser-webpack-plugin');
const OptimizeCssAssetWebpackPlugin= require('optimize-css-asset-webpack-plugin')
plugins:[
new MiniCSSExtractPlugin({filename:'css/main.[contentHash:8].css' //[contentHash:8] 设置缓存
})
],
优化
optimization:{
minimizer:[
// 压缩 js
new TerserPlugin(),
// 压缩 css
new OptimizeCssAssetWebpackPlugin()]
},
module:{
rules:[
{
test:/\.css&$/,
loader:[
MiniCSSExtractPlugin.loader,
'css-loader'// 解决 css 文件之间的依赖关系, @import 款式引入关系
'postcss-loader' // 需装置 autoprefixer 插件
]
}
]
},
