纲要
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插件
]
}
]
},
发表回复