

首页  思维导图  详情



webpack整理

2020-01-04 09:09:04   28  举报





AI智能生成

webpack成神之路总结

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的新语法

use

babel-loader

es6语法转换为es5语法

exclude<br>

/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 二选一

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

 Collect

Get Started

数据整理逻辑

 Collect

Get Started

Webpack HMR

 Collect

Get Started

Webpack

 Collect

Get Started

webpack





0 条评论

下一页