webpack安装
yarn add webpack webpack-cli -S
mode属性，指明打包环境
mode:'development', //打包模式 默认两种 production和development
开发环境下，打包输出的文件不会进行压缩；生产环境则会
入口entry和出口output
// entry:{ //配置多入口文件
// home:'./src/home.js',
// other:'./src/other.js'
// },
entry:'./src/index.js',
output:{
filename:'[name].[hash:8].js',
//打包后的文件名,[hash]，打包后会在文件后缀添加hash戳,长度为8个字节
path:path.resolve(__dirname,'dist'),
//路径必须是一个绝对路径，可以使用path模块转换成绝对路径
// publicPath:''//打包后统一添加前缀域名
library:'bd',//将打包的文件执行的即使函数赋值给bd变量
},
<script src="main.js?6628f94fe86c206b417f"></script>
<!-- 尾部hash戳，防止因为浏览器缓存，导致文件不更新-->
开发静态服务器的配置
安装插件webpack-dev-server，安装后静态服务配置需要在devServer中配置
module.exports={
devServer:{ //开发静态服务配置
port:3000,
progress:true,
hot:true, //热更新
contentBase:"./dist",
compress:true, //gzip压缩
before(webapp){ //只想单纯模拟数据数据时 ，可以再before钩子函数中写假数据
webapp.get('/api/user',(req,res)=>{
res.json({'name':'xxxxxxxxxx'})
})
},
// proxy:{ //请求代理到express服务器，解决跨域的问题，本地服务端口必须是8080，需要开发模式下使用
// '/api':{
// target:'http://localhost:3002',
// pathRewrite:{'/api':'/get'} //重写url地址，请求服务器提供的url地址
// }
// }
},
- 在package.json文件中配置执行脚本命令
"scripts": {
"build": "webpack --config webpack.config.js",
"dev": "webpack-dev-server"
},
-
打包指令
yarn run build是webpack打包指令，如果安装了webpack-cli，可以使用npx webpack进行打包；--config webpack.config.js参数指明了webpack的配置文件，你的webpack配置文件名也可以是webpack.dev.js或者webpack.prod.js，通过--config xxx.js指明目标webpack配置进行打包 -
开启静态服务指令
yarn run dev
常用插件
//将所有js文佳中引入的样式文件打包合并到一个文件
let MiniCssExtractPlugin = require('mini-css-extract-plugin')
//css压缩
let OptimizeCss = require('optimize-css-assets-webpack-plugin')
//mini-css-extract-plugin压缩css,不过该压缩会覆盖webpack提供的默认设置，
//因此还需要插件uglifyjs-webpack-plugin压缩js,需要在生产模式下起作用
let UglifyJsWebpackPlugin = require('uglifyjs-webpack-plugin')
//打包时清除旧的打包文件
let {CleanWebpackPlugin} = require('clean-webpack-plugin')
//拷贝其他文件夹下的文件到打包目录
let CopyWebpackPlugin = require('copy-webpack-plugin')
//使用webpack本身的插件时
let Webpack = require('webpack')
plugins插件配置
plugins:[ //数组 ，放着所有的webpack插件，插件十个类或者构造函数
new HtmlwebpackPlugin({
'template':'./src/index.html',//目标模板文件
'filename':'index.html',
'minify':{
// removeAttributeQuotes:true,//删除html可以去除掉的双引号
// collapseWhitespace:true//折叠一行显示
},
hash:true //每次打包生成不同的文件名解决由于缓存,文件不变的问题
}),
new MiniCssExtractPlugin({
filename:"main.css" //规定抽离出的css文件名
}),
new Webpack.ProvidePlugin({
$:'jquery' // 使用webpack插件中的ProvidePlugin方法，将jquery以$注入到模块中
}),
new Webpack.DefinePlugin({ //定义全局变量，将下方属性注入到所有模块中
"DEV":JSON.stringify('production')
}),
new CleanWebpackPlugin(), //重新打包删除旧的打包输出的目录dist
// new CopyWebpackPlugin({//将目标文件夹下的文件拷贝到dist打包目录
// patterns:[{
// from:'fromDir',to:''
// }]
// }),
new Webpack.NamedModulesPlugin(), //打印更新的模块路径
new Webpack.HotModuleReplacementPlugin() //热更新组件
],
webpack优化项
optimization:{ //webpack 优化项 需要在production模式下起作用
minimizer:[
new OptimizeCss(),
new UglifyJsWebpackPlugin({
cache:true,
parallel:true,
sourceMap:true
})
],
splitChunks:{ //分割代码块，将公共部分代码抽离成一个文件
cacheGroups:{
common:{
chunks:'initial',
minSize:0,
minChunks:2 //引用大于等于2次才进行抽离
},
vendor:{ //抽离出公共的模块，依赖苦苦
priority:1,//优先抽离
test:/node_modules/,
chunks:'initial',
minSize:0,
minChunks:2
}
}
}
}
resolve 属性
resolve:{ //用来解析第三方包
modules:[path.resolve('node_modules')],
// 配置 Webpack 去哪些目录下寻找第三方模块
extensions: ['.js', 'css','.json'],
//在导入语句没带文件后缀时，Webpack 会自动带上后缀后去尝试访问文件是否存在
alias:{ //配置项通过别名来把原导入路径映射成一个新的导入路径。
bootstrap:'bootstrap/dist/css/bootstrap.css'
},
mainFields:['style','main']
//有一些第三方模块会针对不同环境提供几分代码,对应代码标识在package.json文件
//Webpack 会根据mainFields的配置去决定优先采用那份代码
},
loader加载器
module:{
//loader
rules:[//规则
{
test:/\.(png|jpg|gif)/,
use:{
//loader:'file-loader',//在js中引入图片 file-loader 默认会在出口文件内部生成一张图片，并返回的结果是一个新的图片地址
loader:'url-loader', //url-loader 会把图片地址转为base64，不会发起网络请求资源
options:{
limit:100,//规定小于100byte字节转为base64
outputPath:'img/',//设置打包后突变的保存路径
publicPath:''//打包后统一添加前缀域名,可用于CDN
}
}
},
{
test:/\.js$/,
use:{
loader:'babel-loader',
options:{
presets:['@babel/preset-env']
}
},
include:path.resolve(__dirname,'src'),
exclude:/node_modules/
},
//style-loader 它时把css插入到head的标签中的
//loader 特点：希望单一
//多个loader需要使用[]
//loader的顺序，是从右向左,从下至上执行
//loader还可以携程对象的形式
{
test:/\.css$/,use:[
MiniCssExtractPlugin.loader,//不使用style-loader的插入css样式，使用link标签引入的方式
'css-loader','postcss-loader']
},
{
test:/\.less$/,use:[
MiniCssExtractPlugin.loader,
'css-loader','postcss-loader','less-loader']
},
{
test:/\.scss$/,use:[
MiniCssExtractPlugin.loader,
'css-loader','postcss-loader','sass-loader']
},
]
},
externals属性
externals:{ //该属性规定发布时，不对以下库进行打包到bundle.js中，
//发布时有些库在html使用了cdn的方式引入库，所以不需要再将依赖代码进行打包
jquery:'$'
}
watch实时监控打包
watch:true, //打开实时监控内容改变
watchOptions:{ //监控选项
poll:500,//一秒轮询500次
aggregateTimeout:500, // 防抖 内容修改结束保存后500毫秒后开始打包
ignored:/node_modules/ //不需要进行监控的文件
}
webpack优化点
- 打包代码压缩
- noParse，不去解析依赖库
- 使用exclude和include去限制加载编译的文件
- webpack.IgnorePlugin
- happypack 多线程打包
- import
//es6 草案中的语法。webpack中实现懒加载，jsonp原理实现动态加载文件
import('./lazyloading.js').then((data)=>{
console.warn(data)
})
热更新 devServer中配置hot：true，搭配webpack插件
- new webpack.NameModulesPlugin() 打印更新的模块路径
- new webpack.HotModuleReplacementPlugin() 热更新插件
//热更新，不用刷新浏览器，指定文件内容发生改变会触发
if(module.hot){
module.hot.accept('./lazyloading',()=>{
console.log('文件更新了！')
})
}
多个webpack文件公共部分合并
webpack-merge用来将一个webpack配置分成两个配置文件，一个开发环境一个生成环境
yarn add webpack-merge -D
三个配置文件：基础配置：webpack.base.js;开发环境配置：webpack.dev.js;生产环境配置：webpack.prod.js
//在开发和生成配置文件中：
let {smart} = require('webpack-merge')
let base = require('./webpack.base')
module.exports = smart(base,{
mode:'development',
...
...
})
postcss-loader注意
使用postcss-loader给css属性添加浏览器前缀，
第一：需要插件autoprefixer@7.x版本，
第二：如果autoprefixer是最新的，则需要在package.json中配置browserslist属性（这个属性配置能够分享目标浏览器和nodejs版本在不同的前端工具。这些工具能根据目标浏览器自动来进行配置，）
package.json中配置browserslist属性
"browserslist": [
"> 1%",
"last 4 version",
"not ie <=8"
]
在postcss.config.js配置
module.exports = {
plugins:[require('autoprefixer')]
}
或者在webpack，postcss-loader的option配置
{
test:/\.css$/,use:[
'style-loader',
'css-loader',{
loader:'postcss-loader',
options:{
plugins:[require('autoprefixer')]
}
}]
}
网友评论