webpack学习笔记

各种loader工具

图片打包工具

不想更换图片名字

截图部分

代码部分

rules: [{

test: /\.(jpg|png|gif)$/,

use: {

loader: 'url-loader',

options: {

name: '[name]_[hash].[ext]',

outputPath: 'images/',

limit: 10240

}

}

}]

常规方法

截图

代码

rules: [{

test: /\.jpg$/,

use: {

loader: 'file-loader'

}

}]

解读

这两个loader都可以解析图片

url-loader多了个limit限制而已，就是确定是否把图片搞成base64到对应的js中，还是在dist文件里面，生成文件夹或者文件操作

url-loader在图片处理这块，完全可以替代file-loader

file-loader不仅仅可以搞定图片，还可以搞定比如txt等文件，不然早就被淘汰了

样式打包工具

常规样式加载

截图

代码

{

test: /\.scss$/,

use: [

'style-loader',

'css-loader',

'sass-loader'

]

}

添加样式前缀

postcss-loader

对应的loader配置

需要配置postcss.config文件

autoprefixer插件安装

npm install autoprefixer -D

截图

添加之后的样式

如果出现node-sass错误

解决方法

npm install --save-dev node-sass

css-loader常用配置项

配置项

代码部分

options: {

importLoaders: 2

}

为了解决类似sass文件里面，嵌套引用了其他sass文件的问题，保证样式会从底部执行到顶部

css模块化

常规引用存在的问题

导致样式变成全局的了，没实现局部样式使用

如果实现css模块化

配置项的修改

样式使用部分

字体文件的使用

引用字体文件

配置项

{

test: /\.(eot|ttf|svg)$/,

use: {

loader: 'file-loader'

}

}

webpack常规安装

全局安装

npm i webpack webpack-cli -g

查询安装版本

webpack -v

局部安装

npm i webpack webpack-cli -D

npm i webpack@版本号 webpack-cli -D

查询版本号 npm info webpack

查询已安装的版本号

npx webpack -v

常规配置文件

在package.json文件里面，有scripts，进行配置

具体配置

使用方法

npm run bundle 启动webpack打包，不用使用npx webpack 进行打包操作了

参考案例

entry入口文件的原貌

output解读

__dirname是相对于根目录下的webpack.config.js

filename为打包之后生成的文件

更改配置文件名字

比如把webpack.config.js更改为webpackconfig.js

可以使用npx webpack --config webpackconfig.js

plugins插件的使用

HtmlWebpackPlugin

npm install --save-dev html-webpack-plugin

配置文件中引入

插件使用

HTML模板

使用方法

HtmlWebpackPlugin会在打包结束后，自动生成一个html文件，并把打包生成的js自动引入到这个html文件中

plugin可以在webpack运行到某个时刻的时候，帮你做一些事情

CleanWebpackPlugin

先清除dist文件夹，然后再打包

npm install clean-webpack-plugin -D

引入插件

const HtmlWebpackPlugin = require('html-webpack-plugin');

const CleanWebpackPlugin = require('clean-webpack-plugin');

使用插件

entry与output配置

默认打包输出为文件为main.js

配置多入口文件的时候

entry

output

publicPath配置

output配置

打包之后添加之后的效果

SourceMap的配置

告诉你源代码错误的位置

它是一个映射关系

最佳配置

截图

代码

mode: 'development',

// development devtool: 'cheap-module-eval-source-map',

// production devtool: 'cheap-module-source-map',

devtool: 'cheap-module-eval-source-map',

解读

在开发环境下，可以使用cheap-module-eval-source-map；上线之后，就可以注释了；当生产环境，就是在线代码有问题，拉取下来之后，要使用cheap-module-source-map

webpackDevServer提升开发效率

webpack --watch模式

配置部分

使用npm run watch即可

内容更新之后，需要手动刷新页面

webpack-dev-server模式

有时候，可能需要npm i webpack-dev-server -D

json中的配置

js中的配置

node server.js

json配置

具体实现

文件位置

对应代码

需要手动刷新

Hot Module Replacement

热模块替换

js配置部分

引入webpack

插件里的配置

实现样式的及时更新，但未刷新页面重新加载

js数据的及时更新，未刷新页面

解析

重新加载number部分

这个地方，是再次加载number对应的函数

Babel处理ES6

安装babel-loader

配置loader

babel/preset-env

一次性到位

npm install -D babel-loader @babel/core @babel/preset-env webpack

babel/polyfill

为了在浏览器中安装es6所支持的环境

对应的配置

只加载需要的解析代码

引入文件

.babelrc文件

接手babel-loader中options对应的对象

业务代码配置

基类中配置

Tree Shaking

想实现的东西：只加载需要的，未加载的功能，不打包

development模式下配置项

json中对应配置

第二种可能：就是不需要使用tree shaking的内容

如果引入来css文件

在productment模式下

js那个可以不用配置，默认开启

在json那个文件下，还是要开启

dev与pro模式的区分打包

常见配置

对应文件

使用webpack-merge

npm i webpack-merge -D

引用文件

使用场景

更新的内容

output的更新

删除打包文件的更新

webpack与Code Splitting

配置文件

这样可以方便的实现代码分割的功能

第二种方法

需要配合插件babel-plugin-dynamic-import-webpack

安装

npm i babel-plugin-dynamic-import-webpack -D

babel文件修改

splitChunksPlugin配置参数详解

webpack官网配置

@babel/plugin-syntax-dynamic-import

babel官方支持的动态魔法注释

注释写法

lazy Loading懒加载

当对应的代码功能需要的时候，才加载对应的文件，保证了网页的加载速度

异步加载

chunks的意思

optimization

中有配置

就是文件打包的过程中，一些js有多少处使用，使用的次数

打包分析

git地址

https://github.com/webpack/analyse

https://webpack.js.org/guides/code-splitting/#bundle-analysis

添加--profile --json > stats.json

使用 webpackPrefetch: true

css文件的代码分割

chunkFilename

MiniCssExtractPlugin

https://webpack.js.org/plugins/mini-css-extract-plugin/

生产环境使用

引入插件

插件创建

loader配置

MiniCssExtractPlugin.loader替代style-loader

json处的配置

optimization配置

插件配置

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

浏览器缓存

不提示性能问题

在pro生产环境下

老版本的webpack可能存在未更改内容，但是contenthash不一样，可以使用这个配置解决这个问题

原因是：老版本的业务代码与低库之间的关系，被分别引入；而配置之后，都打包到run对应的文件中

Shimming

解决js模块之间的底库的引用问题

对应的配置

imports-loader

把js中this指向修改为window，在默认情况下，指向模块自身

环境变量的使用

修改dev配置

修改prod配置

修改common配置

json中的配置

library库

可以让人这样使用

对应的配置

pwa配置

http-server

workbox-webpack-plugin

业务代码中还需要设置下

实现的效果

ts打包配置

使用ts-loader

创建tsconfig.json

@types/lodash

webpackDevServer

实现请求转发

proxy代理配置，在开发环境下

解决单页应用路由问题

ellint配置

npm install eslint -D

npx eslint --init选择配置

npx eslint src 对于src文件夹下的js进行检查

基本配置

eslint-loader

安装

插件使用

在开发环境还要配置

其他可能

提升webpack打包速度的方法

跟上技术的迭代

在尽可能少的模块上应用loader

js优化

plugin尽可能精简并确保可靠

resolve参数合理配置

dllplugin提高

webpack.dell.js

add-asset-html-webpack-plugin

引入插件

插件配置部分

控制包文件大小

多进程打包

合理使用sourceMap

结合stats分析打包结果

开发环境内存编译

无用插件剔除

多页面打包配置

入口文件配置

插件优化

如何编写一个loader

最基本的方法

loader代码逻辑

看看

编写plugin

定义插件

使用插件