webpack整理
2020-01-04 09:09:04 28 举报AI智能生成
webpack成神之路总结
作者其他创作
大纲/内容
es7语法
@babel/polyfill
初始化
安装库
webpack-dev-server
webpack
webpack-cli
配置参数
mode
production
entry
index.js文件
output
filename
index.js输出文件
path
输出目录
module
rules
css
use
从后往前
style-loader
把css加载到index.html中
MiniCssExtractPlugin.loader
将css抽离成单独的文件
css-loader
处理css中引入其他css文件的loader
postcss-loader
postcss.config.js
plugins: [require('autoprefixer')(), require('cssnano')()]
依赖库
autoprefixer
自动添加前缀
cssnano
压缩css代码
postcss-cssnext
css的下一代，使用css4的新语法
依赖库
style-loader css-loader postcss-loader autoprefixer cssnano postcss-cssnext
noParse:/jquery/,//不去解析jquery中的依赖库
jquery
use
expose-loader
window注入$
less
依赖库
style-loader css-loader less less-loader postcss-loader autoprefixer cssnano postcss-cssnext
use
先处理成css,再嵌入到index.html
style-loader
把css加载到index.html中
MiniCssExtractPlugin.loader
将css抽离成单独的文件
less-loader
postcss-loader
postcss.config.js
plugins: [require('autoprefixer')(), require('cssnano')()]
依赖库
autoprefixer
自动添加前缀
cssnano
压缩css代码
postcss-cssnext
css的下一代，使用css4的新语法
js
use
babel-loader
es6语法转换为es5语法
exclude
/node_modules/
依赖库
babel-loader @babel/core @babel/preset-env
.babelrc
presets
@babel/preset-env
useBuiltIns
entry
足够安全且代码体积不是特别大
usage
相对安全且打包的js体积不大
false
绝对安全，打包体积会大
@babel/polyfill
plugins
plugin-proposal-class-properties
类属性
loose:true
plugin-proposal-decorators
@装饰器
legacy:true
@babel/plugin-proposal-optional-chaining
可选链
@babel/plugin-transform-runtime 废弃
依赖库
@babel/runtime
转ES新的API
@babel/plugin-transform-runtime
开发装
@babel/polyfill 二选一
js
use
eslint-loader
jpg,png,gif
use
url-loader
图片比较小的直接编译成base64
limit
10000
小于10k的才编译成base64
file-loader
file-loader默认会在内部生成一张图片到build目录下，并且把生成图片的名字返回
import 图片名 from '图片相对位置'
optimization
UglifyJsPlugin
依赖库
uglifyjs-webpack-plugin
压缩js
OptimizeCSSAssetsPlugin
依赖库
terser-webpack-plugin optimize-css-assets-webpack-plugin
压缩css
插件
HtmlWebpackPlugin
自动引入js到index.html中
依赖库
html-webpack-plugin
MiniCssExtractPlugin
抽离css出来
依赖库
mini-css-extract-plugin
CleanWebpackPlugin
自动删除build文件夹
依赖库
clean-webpack-plugin
Webpack.ProvidePlugin
每个模块中自动注入$对象
copyWebpackPlugin
把文件拷贝到打包文件下
依赖库
copy-webpack-plugin
webpack.BannerPlugin
用于版权说明
webpack.DefinePlugin
定义环境变量
字符串需要在双引号里加单引号
webpack.NamedModulesPlugin
打印热更新的模块路径
webpack.HotModuleReplacementPlugin
热更新插件
devServer
contentBase
index.html 目录
progress
进度
port
host
open
自动打开
inline
实时刷新
proxy
hot
热更新
resolve
extensions
import未写扩展名时附加的扩展名
alias
路径别名
devtool
source-map
会打包出map文件，会指向出错的行列， 大而全
eval-source-map
不会产生map文件，也会显示行列
cheap-module-source-map
产生map文件，没有调试功能
cheap-module-eval-source-map
不会产生map文件，不会产生列信息
watch
每次按保存键，webpack自动为我们打包
watchOptions
poll
监测修改时间ms
aggregateTimeout
防止重复
ignored
node_modules
0 条评论
下一页
为你推荐
查看更多
