webpack常用加载器、插件总结小白攻略_总结菜鸟教程网

前言webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。webpack学习的一个比较难的点便是它的配置与配置的组合,本文

webpack常用加载器、插件总结小白攻略

前言

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。
webpack学习的一个比较难的点便是它的配置与配置的组合,本文总结了webpack中的常用,主流的配置,并简单介绍了webpack在项目中的应用。可以帮助初学者快速的定位所需要的功能,当然每个加载器(loader)插件(plugins)的功能详解用法限于篇幅不能展示,建议大家去npm官网查看其最新配置。
因为这方面内容较多,本文会不断迭代。大家可以收藏加关注,并在评论中指出优化的地方。非常感谢
注意:本文基于webpack4

webpack常用加载器、插件总结小白攻略_总结菜鸟教程网

npm官网地址:https://www.npmjs.com/
babel:https://www.babeljs.cn/

1.常用loader及功能

babel-loader @babel/code @babel/preset-env babel-polyfill(严格上是个插件)
js语法转换工具,可以将ES6或更高级的语法转换成浏览器支持的语法

css-loader
处理入口文件中的css

style-loader
处理文件模块中的style样式

postcss-loader
第一个就是前面提到的把 CSS 解析成 JavaScript 可以操作的 抽象语法树结构(Abstract Syntax Tree,AST),第二个就是调用插件来处理 AST 并得到结果。

file-loader
处理引入的静态文件,可以按目录分类

url-loader
同file-loader,处理引入的静态文件,还可以把小文件转换为base64格式的URL,从而减少网络请求次数。url-loader依赖file-loader。

eslint-loader
语法检测loader,会在打包或编译的时候提示语法问题

2.常用插件及功能

autoprefixer
一款自动管理浏览器前缀的插件,它可以解析CSS文件并且添加浏览器前缀到CSS内容里,使用Can I Use(caniuse网站)的数据来决定哪些前缀是需要的。

html-webpack-plugin
当使用 webpack 打包时,创建一个 html 文件,并把 webpack 打包后的静态文件自动插入到这个 html 文件当中。

mini-css-extract-plugin
将CSS提取为独立的文件的插件,对每个包含css的js文件都会创建一个CSS文件,支持按需加载css和sourceMap

optimize-css-assets-webpack-plugin
压缩优化css

uglifyjs-webpack-plugin
压缩优化js

webpack-dev-server
启动一个本地临时的服务器,可以设置端口,支持热更新(将HotModuleReplacementPlugin插入到进程中),

CleanWebpackPlugin
能帮忙每次打包之前先删除dist文件夹。

copyWebpackPlugin
可以把其他的文件或文件夹拷贝到打包文件里

bannerPlugin(webpack)
版权字符串

ignorePlugin
忽略掉引入的包

webpack-merge 
可以抽取出 开发与生产环境的相同的webapck配置。vue里的配置文件dev.config.js, prod.config.js就基于这个插件

html-withimg-plugin
处理html中的img

definePlugin
定义环境变量

dllPlugin 
在一个额外的独立的 webpack 设置中创建一个只有 dll 的 bundle(dll-only-bundle)。 这个插件会生成一个名为 manifest.json 的文件,这个文件是用来让 DLLReferencePlugin 映射到相关的依赖上去的。

DLLReferencePlugin
这个插件是在 webpack 主配置文件中设置的, 这个插件把只有 dll 的 bundle(们)(dll-only-bundle(s)) 引用到需要的预编译的依赖。

happypack
多线程打包

3.开发中常用的功能

跨域解决

webpack-dev-server中有proxy代理
webpack-dev-server中有before(mock功能)拦截请求模拟数据
使用中间件webpack-dev-middleware把本地的webpack配置到server

路径简写

reslove :{
    alias:{
        'img':resolve('src')
    }
}
- import xxx form '../../../aaa'
+ import xxx form '@/aaa'

热更新

webpack-dev-server 中配置inline:true
或添加插件webpack.HotModuleReplacementPlugin(),

懒加载

添加插件@babel/plugin-syntax-dynamic-import

let button = document.createElement("button");
button.innerText = "播放";
button.addEventListener("click", function() {
  // es6 草案中的语法, 用jsonp实现动态加载文件, 需要插件@babel/plugin-syntax-dynamic-import
  import("./source.js").then(data => {
    // promise对象
    console.log(data.default); // 挂载在了default属性上
  });
});
document.body.appendChild(button);

4.webpack打包优化

既能提升速度,又能减小体积

1去除映射文件sourceMap
devtool:false

2外部引用cdn

速度优化

1大文件预打包
dllPlugin DLLReferencePlugin

2多线程打包
happypack

3babel-loader开启缓存

// webpack.config.js
use: [{
    loader: 'babel-loader',
    options: {
      cacheDirectory: true
    }
}]
// .bablerc
{
"presets": [
    "env",
    "react"
],
"plugins": ["transform-runtime"]
}

4resolve ailas添加常用包的路径

体积优化

1按需加载
babel-plugin-import

2写代码时使用import引入而不是require

3异步加载资源
const Foo = () => import(‘./Foo.vue’);

4抽离公共模块
optimization splitchunks

海计划公众号
(0)
上一篇 2020/03/24 05:40
下一篇 2020/03/24 05:40

您可能感兴趣的内容