webpack插件
- 本地服务:
webpack-dev-server
devServer:{//开发服务配置
port:'3000',
progress:true, //进度条
contentBase:'./dist'//作为静态服务目录
}
- html先关操作的插件:
html-webpack-plugin
new HtmlWepPackPlugin({
template:'./src/index.html',//模板是哪一个
filename:"index.html",//打包后的名字
minify:{
collapseWhitespace :true,//删除空格
removeAttributeQuotes:true, //删除双引号
},
hash:true
})
- mini-css-extract-plugin将css抽离城单独一个文件
- 编译类似Class方法 @babel/plugin-proposal-class-properties
- cleanWebpackPlugin 删除插件
- 每次打包前先删除文件夹
new CleanWebpackPlugin({'./dist'})
- 每次打包前先删除文件夹
- copyWebpackPlugin 拷贝插件
- 将某些文件复制进某个文件内
new CopyWebpackPlugin([
{from:"doc",to:"./"}
])
- 将某些文件复制进某个文件内
- bannerplugin 内置
- 版权设置 (在js文件前加上)
new webpack.BannerPlugin('by MR.zhao')
- 版权设置 (在js文件前加上)
- 全局变量
new webpack.DefinePlugin({
DEV:JSON.stringify('dev')
})
- webpack 两套配置 使用webpack-merge插件合并
webpack-dev.js webpack-product.js webpack.base.js
- 最后使用webpack-merge合并
例如:在生产环境如下:
let {smart} =require('webpack-merge')
let base =require('webpack.base.js')
modules.exports=smart(base,{
mode:""
)
-
loader
- cssloader
- cssloader
- **css加前缀 **
postcss-loader autoprefixer
- **es6 => es5 **
babel-loader原文件进行转化 @babel/core核心模块 @babel/preset-env转化模块
-
优化项
压缩js
引入第三方模块
-
expose-loader 内联
写法:import $ from 'expose-loader ? $ ! jquery'
在全局上暴露$代表jquery
或者:
loader类型:pre loader、normal loader、 post loader、内联loader -
在每个模块注入一个$ 在每个模块都可以引用
new Webpack.ProvidePlugin({
$:jquery
})
externals某个模块不需要打包- 引入不打包
externals:{
jquery:$
}
- 引入不打包
-
处理img
file-loader css里的图片、html-withimg-loader html中的图片进行打包、url-loader小图片用base64
{
test:/\.(png|jpg)/,
use:{
loader:"url-loader"
options:{
limit:200*1024 //小于这个的进行base64处理(不用进行http请求、但是要大于原图片的1/3)
outputPath:"/img" //放在某个文件夹下
}
}
}
-
为所有的请求地址加上路径
-
多入口文件
chunks里边确定放那个模块: -
打包后的代码出错 进行调试
- source-map
- 源码映射 会单独生成一个sourcemap文件 出错了我 会标识当前报错的列和行 大而全
devtool:"source-map"
- 源码映射 会单独生成一个sourcemap文件 出错了我 会标识当前报错的列和行 大而全
- eval-source-map
- 不会产生单独的文件 但可以显示行和列
devtool:"eval-source-map"
- 不会产生单独的文件 但可以显示行和列
- cheap-module-source-map
- 不会产生列 但是是一个单独的映射文件 产生后可以保存
- cheap-module-eval-source-map
- 不会产生文件,集成在打包后文件中 不会产生行和列
- source-map
-
监控 实时打包编译
watch:true,
watchOptions:{
//监控的选项
poll:1000,//每秒巡查1000次
aggreatement:500,//防抖 编写完成500毫秒后在开始打包
ignored:/node_modules/ //不需要进行监控的文件
}
-
跨域
- 代理 http-proxy
devServer:{
重写请求地址 将请求地址代理过去
proxy:{
"/api:{
target:"http://",
目标地址
pathRewrite:{‘/api’,""}
重写地址 将api去掉
}
}
}
- 前端自己模拟数据
devServer:{
before(app){
app.get('/user',(req,res)=>{
res.json(要返回的数据)
})
}
- 有服务端 不想用代理 能不能在服务端中启动webpack 端口用服务端端口
- 代理 http-proxy
-
resolve 解析 第三方包
- extensions文件查找顺序
-
不解析
{
noParse: /jquery/
}