webpack总结篇

Posted 2023-04-19

参考技术A

一、webpack简介

1.1 版本更迭

image.png

大版本变化

image.png

1.2 功能进化

Webpack V1

Webpack V2

Webpack V3

V1 -> V2

迁移指南 https://doc.webpack-china.org/guides/migrating/

V2 -> V3

更新升级即可

二、webpack核心概念

2.1 Entry

2.2 Output

2.3 Loaders

2.3.1 常用Loader

编译相关

样式相关

文件相关

2.4 Plugins

2.4.1 常用plugins

优化相关

功能相关

2.5 名词

三、初探 webpack

3.1 使用babel打包es6

3.1.1 编译 ES 6/7

Babel

Babel Presets

Babel Polyfill

Babel Runtime Transform

例子

3.2 打包 Typescript

配置

tsconfig

Typings

例子

3.3 提取 js 的公用代码

例子

image.png

3.4 代码分割和懒加载

第一种方式：通过wepack内置方法

第二种方式：通过ES2015 Loader Spec

import()方式返回一个promise在import中传入需要依赖的明，动态加载模块，就可以像使用Promise一样使用import().then()

代码分割场景

例子

运行打包这时loadash提取到vendor中

image.png

这时候还不是我们想要的

image.png

image.png

image.png

import()动态加载的写法

合并了subPageA和subPageB

image.png

来看看打包后的文件，既有A、B

image.png

在webpack代码分割中使用async异步加载

image.png

image.png

3.5 处理 CSS 和 CSS 模块化

引入css

Style-Loader

Style-Loader的options

例子

CSS-Loader

options

CSS-Modules

例子

配置Less / Sass

例子

提取 CSS

例子

image.png

3.6 PostCSS in Webpack

安装

例子

3.7 Tree shaking

3.7.1 JS Tree shaking

使用场景

例子

3.7.2 CSS Tree shaking

例子

四、由浅入深Webpack

4.1 文件处理

4.1.1 图片处理

4.1.2 处理雪碧图、base64、压缩图片

4.1.2 处理字体文件

4.1.3 处理第三方 JS 库

1.providePlugin

以引入jQuery为例

引入本地libs中的jQuery

2.imports-loader

4.2 html in webpack(自动生成HTML)

4.2.1 生成 HTML

options

4.2.2 HTML 中引入图片

webpack用法总结

　　原先已经翻译过一篇关于webpack的文章了，那是刚开始学习webpack时参考阮一峰的教程，顺便就把它的英文文章给翻译了过来。Webpack是一个强大的模块化打包和构建工具，不仅能对JS进行打包，而且还能通过加载器对CSS 、image 、font 进行打包，引用时直接当作模块来引用，最后统一打包成一个bundle.js文件来输出；同时Webpack还支持插件功能，其各种插件大大丰富了webpack的功能，如最常见的html-webpack-plugin插件，能由写好的模版在编译后直接生成所需要的html页面，方便维护、扩展和部署上线。此外，Webpack还能对css进行预处理, 如使用postcss－loader中的autoprefixer 、pxtorem等功能实现CSS免前缀 ，px自动转换为rem；使用less-loader 、scss-loader直接引用less、scss文件；使用css-loader中的css modules实现CSS样式的局部与全局编写，并用hash值来进行样式命名，让你在编写代码时再也不用为命名而发愁了。。。总之，Webpack给人以无所不能的感觉，但是上手麻烦，配置项看起来让新手一脸懵逼，远不如gulp小而灵巧，应该也算是它的一个弊端吧！

　　因在Webpack里踩过的坑实在太多了，所以便对自己现阶段所了解的用法作一个总结，后续学习再逐渐完善上去。

一、配置文件

　　配置文件中主要分为入口文件处理、输出处理、加载器、插件、webpack开发服务器这几个部分，因webpack开发服务器这部分内容较多，放到后面详细介绍。

  1 var webpack = require(\'webpack\');
  2 var path = require(\'path\');
  3 
  4 // _dirname 为当前模块文件所在目录的绝对路径
  5 // path.resolve 相当于 _dirname + build 进行地址拼接
  6 var buildPath = path.resolve(__dirname,"build");
  7 var nodemodulesPath = path.resolve(__dirname,\'node_modules\');
  8 
  9 var autoprefixer = require(\'autoprefixer\');
 10 var px2rem = require(\'postcss-pxtorem\');
 11 var px2remOpts = {
 12     rootValue: 100,
 13     propWhiteList: [],
 14 };
 15 
 16 var HtmlWebpackPlugin = require(\'html-webpack-plugin\');
 17 
 18 var config = {
 19 
 20     //入口文件配置
 21     entry:｛
 22         // 入口文件路径
 23         index:path.resolve(__dirname,\'src/main.js\'),
 24 
 25         // 为了优化，切割代码，提取第三方库
 26         vendor: [
 27           \'react\',
 28           \'react-dom\',
 29           \'react-router\'
 30         ]
 31         
 32     ｝,
 33 
 34     resolve:{
 35         // extentions: 配置文件的扩展名，当在import文件时，不用在需要添加扩展名
 36         // 默认的扩展名为[“”, “.webpack.js”, “.web.js”, “.js”]
 37         // 空字符串在此是为了resolve一些在import文件时不带文件扩展名的表达式
 38         extentions:["","jsx","json","js","web.js"],
 39 
 40         // 路径别名, 懒癌福音
 41         alias:{
 42           app:path.resolve(__dirname,\'src/js\'),
 43           // 以前你可能这样引用 import { Nav } from \'../../components\'
 44           // 现在你可以这样引用 import { Nav } from \'app/components\'
 45 
 46           style:path.resolve(__dirname,\'src/styles\')
 47           // 以前你可能这样引用 @import "../../../styles/mixins.scss"
 48           // 现在你可以这样引用 @import "style/mixins.scss"
 49         }          
 50     },
 51 
 52     //文件导出的配置
 53     output:{
 54         path:buildPath,               // 输出路径
 55         filename:"app.js"             // 输出文件名 
 56     },
 57 
 58     // 生成source-map , 便于开发者debug 
 59     devtool: \'eval-source-map\',
 60 
 61     module: {
 62         //loaders加载器
 63         loaders: [
 64             // babel ES6解析
 65             {
 66                 test: /\\.(js|jsx)$/,                 // 用正则来验证所要测试的文件后缀名
 67                 include: [path.resolve(__dirname, "src/app")],  // 所要处理文件的路径
 68                 exclude: [nodemodulesPath],             // 排除不处理的目录
 69                 // 加载器的名字，不同加载器之间用！连接，？为使用该加载器后附带的功能 , 加载器的执行为从后往前执行
 70                 loader: \'babel\' 
 71             },
 72                                      
 73             // image解析
 74             {
 75                 test:/\\.(png|jpg)$/,
 76                 loader:\'url-loader?limit=50000\'
 77             },
 78             // CSS文件解析
 79             {
 80                 test:   /\\.css$/,
 81                 loader: "style-loader!css-loader!postcss-loader"
 82             }
 83 
 84         ]
 85     },
 86 
 87     // postcss平台
 88     // 此处配置了免前缀功能和px转换为rem功能
 89     postcss: [ autoprefixer({ browsers: [\'last 2 versions\'] }),px2rem(px2remOpts) ],
 90 
 91     plugins: [
 92 
 93         //   优化使用模块
 94         new webpack.optimize.OccurrenceOrderPlugin(), 
 95         // webapck 会给编译好的代码片段一个id用来区分
 96         // 而这个插件会让webpack在id分配上优化并保持一致性。
 97         // 具体是的优化是：webpack就能够比对id的使用频率和分布来得出最短的id分配给使用频率高的模块
 98 
 99 
100         //   压缩代码
101         new webpack.optimize.UglifyJsPlugin({
102               compressor: {
103                 warnings: false
104               }
105         }), 
106 
107 
108         //  去除debug提示信息
109         // 很多库的内部，有process.NODE_ENV的判断语句，
110         // 改为production。最直观的就是没有所有的debug相关的东西，体积会减少很多
111         new webpack.DefinePlugin({
112               \'process.env\': {
113                 \'NODE_ENV\': JSON.stringify(\'production\')
114               }
115         })
116 
117 
118         // \'vendor\' 就是把依赖库(比如react react-router, redux)全部打包到 vendor.js中
119         // \'vendor.js\' 就是把自己写的相关js打包到bundle.js中
120         // 一般依赖库放到前面，所以vendor放第一个
121         new webpack.optimize.CommonsChunkPlugin(\'vendor\', \'vendor.js\' ),
122 
123 
124         new HtmlWebpackPlugin({
125               template:\'src/index.html\',
126               // html模板的路径
127               
128               title: \'产品模式\',
129               // html模版的标题
130               
131               filename:\'index.html\',
132               // 文件名以及文件将要存放的位置
133 
134               favicon:\'./src/favicon.ico\',
135               // favicon路径
136               
137               inject:\'body\',
138               // js插入的位置，true/\'head\'  false/\'body\'
139 
140               chunks: [\'vendor\', \'index\' ],
141               // 指定引入的chunk，根据entry的key配置，不配置就会引入所有页面的资源
142 
143               hash:true,
144               // 这样每次客户端页面就会根据这个hash来判断页面是否有必要刷新
145               // 在项目后续过程中，经常需要做些改动更新什么的，一但有改动，客户端页面就会自动更新！
146 
147               minify:{
148               // 压缩HTML文件
149                 removeComments:true,
150                 // 移除HTML中的注释
151 
152                 collapseWhitespace:true
153                 // 删除空白符与换行符
154               }
155         })
156     ]
157 }
158 
159 module.exports = config;

　　上面代码中详细介绍了Webpack的用法和在实际项目开发过程中的常用的加载器和插件

二、启动运行

　　Webpack该如何启动运行编译了，主要有以下几种方法：

　　1. 启动编译　

webpack    //  默认执行 webpack.config.js文件
webpack --config webpack-pro-config.js       //执行另一份配置文件 
webpack --display-error-details              //显示异常信息 
webpack --watch                             //监听变动并自动打包 
webpack -p                                  //压缩混淆脚本，这个非常非常重要！ 
webpack -d                                  //生成map映射文件，告知哪些模块被最终打包到哪里了

　　2.快捷执行

　　当我们想执行webpack的执行命令时，我们就得在命令行中输入很长一遛的命令，自己操作起来很不方便，同时也不便于后续人员的维护, 我们可以把执行命令写在package.json文件中的scripts键中，这样我们每次执行时只需敲自定义的命令即可

"scripts": {
    "start": "webpack --watch",      // npm start  
    "dev": "webpack-dev-server --host 0.0.0.0",    // npm run dev
    "pro": "webpack --config webpack-pro-config.js --progress --colors"   // npm run pro
  }

  

webpack各加载器和插件用法详细介绍：

1.  上次我翻译的webpack-demo