西昌新站seo,免费二维码生成器,广告推广是什么,亚马逊雨林生存游戏一文了解webpack中常见实战案例配置#x1f6f4;序言#x1f68c;一、Library的打包1. webpack打包库2. 库引用冲突#x1f68d;二、PWA的打包配置1. PWA是什么2. webpack中的PWA#x1f68e;三、TypeScript的打包配置1. 引例阐述2. webpack对ts的配置#xff08;1#x… 一文了解webpack中常见实战案例配置序言一、Library的打包1. webpack打包库2. 库引用冲突二、PWA的打包配置1. PWA是什么2. webpack中的PWA三、TypeScript的打包配置1. 引例阐述2. webpack对ts的配置1背景2配置步骤3. ts识别第三方库四、WebpackDevServer进阶操作1. WebpackDevServer实现请求转发2. WebpackDevServer解决单页面应用路由问题五、ESLint在Webpack中的配置1. ESLint是什么2. 如何安装ESLint3. 为什么要在webpack中配置ESLint️六、Webpack性能优化1. 跟上技术的迭代(Node,Npm,Yarn)2. 在尽可能少的模块上应用Loader3. 合理使用插件4. resolve参数合理配置1常见配置2参数讲解5. 使用DllPlugin提高打包速度6. 控制包文件大小7. 多进程打包8. 合理使用sourceMap9. 结合 stats 分析打包结果10. 开发环境内存编译11. 开发环境无用插件剔除️七、多页面打包配置八、结束语彩蛋 One More Thing往期推荐番外篇序言
在前面的两篇文章中我们讲解了 webpack 的入门知识。但是呢入门知识了解了之后总得应用到具体的案例当中来。
因此在下面的这篇文章中将带领大家来了解关于 webpack 的一些实战案例配置包括第三方库、 PWA 、 ts 的打包配置以及 WebpackDevServer 的进阶操作还有需重点掌握的关于 webpack 如何做性能优化处理这个问题。
下面开始本文的介绍~
一、Library的打包
假设我们现在要开发一个组件库或者一个函数库时对于这样的库代码我们应该如何让 webpack 来进行打包呢
1. webpack打包库
假如我们现在写了很多逻辑代码同时呢我们将这些逻辑代码进行打包打包之后它全部生成在 dist 文件夹下的 mondaylib.js 文件中。
好了现在这个库生成了。那如何让我们的用户来引入 mondaylib 这个库呢
一般情况下别人引入我们的库的方法具体有以下几种方式
//方式一
import mondaylib from mondaylib
//方式二
const mondaylib require(mondaylib)
//方式三
require([mondaylib], function(){})所以如果想让我们的用户来引入这个库我们需要在 webpack.config.js 下进行配置。具体配置如下
const path require(path);module.exports {mode: production,entry: ./src/index.js,output: {path: path.resolve(__dirname, dist),filename: mondaylib.js,//此处配置libraryTargetumd表示支持commonJS这种语法libraryTarget: umd}
}libraryTarget: umd 表示支持 commonJS 这种语法因此可以引入上面三种方式。同时 libraryTarget 也可以设置为其他值比如 this 和 window 。
libraryTarget: this 的意思为我要让 mondaylib 这个变量挂载到页面上。 libraryTarget: window 则表示为 mondaylib 这个变量将挂载到 window 上。 除了以上三种情况还有另外特殊情况具体如下
script srcmondaylib.js/script此时我们需要在 webpack.config.js 中进行以下配置
const path require(path);module.exports {mode: production,entry: ./src/index.js,output: {path: path.resolve(__dirname, dist),filename: mondaylib.js,//将打包生成的代码挂载到页面的全局变量上library: mondaylib,//此处配置libraryTargetumd表示支持commonJS这种语法libraryTarget: umd}
}其中第一个 library 是属性值第二个 mondaylib 是我们的库名这个配置的意思为将打包生成的代码即 mondaylib.js 这个库给挂载到全局的变量上。
2. 库引用冲突
假设现在我们在上面 mondaylib 这个库中引入了 lodash 这个库。然后呢当用户使用的时候用户又再引入了一次lodash这个库。像下面代码这样
import _ from lodash;
//mondaylib这个库原先已经引入过lodash这个库
import mondaylib from mondaylib;所以现在我们该如何来避免这种问题发生呢我们再 webpack.config.js 中进行配置具体代码如下
const path require(path);module.exports {externals: [lodash]
}从以上代码中我们可以知道通过 externals: [lodash] 这个配置来告诉 webpack 告诉它说如果在打包过程中 mondaylib 这个库中如果有遇到 lodash 这个库那么就避开它不要进行打包。通过这种方式可以有效地避免库多次引用的问题减少代码的打包大小。 externals 还有另外一种特殊配置如下代码所示
module.exports {externals: {// 表明lodash这个库如果在commonjs这种环境下被使用那么要求lodash加载的时候必须叫做lodashlodash: {commonjs: lodash}}
}如果这样配置意在表明 lodash 这个库如果在 commonjs 这种环境下被使用那么要求 lodash 加载的时候必须命名为 lodash 而不能随意命名。像下面这样
//✔可使用方式命名为lodash
import lodash from lodash
//✘不可使用方式未命名为lodash
import _ from lodash二、PWA的打包配置
1. PWA是什么
PWA全称为 Progressive Web Application 即渐进式Web应用程序。
PWA 是一门比较新的前端技术那它是一种什么样的技术呢
PWA 可以实现的效果是如果你访问一个网站有可能第一次你访问成功了但是呢突然间这个网站的服务器挂掉了。那么这个时候你访问网站应该就是没办法访问了。但是呢 PWA 会将你第一次访问的页面给缓存起来。之后即使服务器挂掉了你依然可以把之前看到的页面再展示出来。
因此 webpack 中有一个插件可以来实现这样的效果。我们来了解一下~
2. webpack中的PWA
第一步 安装插件。具体代码如下
npm install workbox-webpack-plugin --save-dev第二步 在 webpack.prod.js 中引入该插件并使用。具体代码如下
const WorkboxPlugin require(workbox-webpack-plugin);module.exports {plugins: [new WorkboxPlugin.GenerateSW({clientsClaim: true,skipWaiting: true})],
}通常情况下我们只需要在线上环境 prod 引入 PWA 而在开发环境中不需要考虑这个问题。通过以上的配置我们在项目打包完成之后 dist 目录下将生成两个新的文件一个是 service-worker.js 另外一个是 precache.js 文件这两个文件就是供我们来使用 PWA 的。 第三步 引入以上文件。具体代码如下
if(serviceWorker in navigator){window.addEventListener(load, () {navigator.serviceWorker.register(/service-worker.js).then(registration {console.log(service-worker registed);}).catch(error {console.log(service-worker regist error);})})
}我们需要在入口文件中写一段业务代码引入 service-worker.js 文件来帮我们做 PWA 。这个时候我们对项目进行打包之后呢如果出现服务器突然挂了的情况那也不用担心 PWA 会帮我们加载原先的页面来提供给我们浏览。
三、TypeScript的打包配置
1. 引例阐述
我们都知道对于不同的开发者来说不同的人写出的代码风格形式各异这样在后期项目的维护性就很难得到保证。那么这个时候风靡于2018年的 Typescript 出现了。 ts 规范了一套 js 的标准因此我们在项目代码的编写中通过 ts 就可以规范我们的代码并且使得我们项目的维可维护性和可扩展性变得更好了。
接下来我们就来了解一下如何通过 webpack 的配置变更来实现对 ts 语法的支持。
2. webpack对ts的配置
1背景
假设我们现在有这么一段 ts 的代码需要进行编译具体代码如下
class Greeter{greeting: string;constructor(message: string){this.greeting message;}greet(){return Hello, this.greeting;}
}let greeter new Greeter(world);let button document.createElement(button);
button.textContent Say Hello;
button.click function(){alert(greeter.greet());
}document.body.appendChild(button);现在我们想要让 webpack 来对这段 ts 代码进行编译该怎么处理呢
2配置步骤
第一步 安装 ts-loader 。具体命令如下
npm install ts-loader typescript -D第二步 我们在 webpack.config.js 文件下进行配置。具体代码如下
const path require(path);module.exports {mode: production,entry: ./src/index.tsx,module: {rules: [{test: /\.tsx?$/,use: ts-loader,exclude: /node_modules/ }]},output: {filename: bundle.js,path: path.resolve(__dirname, dist)}
}第三步 配置 tsconfig.json 文件。具体代码如下
{compilerOptions: {outDir: ./dist,module: es6,target: es5,allowJs: true}
}3. ts识别第三方库
有时候我们会调用 lodash 中的 join 方法但是呢如果我们不进行特殊处理的话在 tsx 文件中正常引入 lodash 这个库并使用是不会报错的。因此我们需要来安装另外一个 ts 的库来对它进行处理一下。具体步骤如下
第一步 安装 types/lodash 库。具体命令如下
npm install types/lodash --save-dev安装完这个库之后 ts 就可以去识别 lodash 的一些函数和方法一旦出现引用不对就会进行报错提示。
那有小伙伴就会有疑问说是不是 ts 拥有所有这样的库像 jQuery 等各种库的类型文件呢
答案当然是否定的。我们可以到 github 上的一个网址https://microsoft.github.io/TypeSearch/来进行搜索如果搜索得到那么我们就可以用 type/库名 来进行安装之后 tsx 文件就会支持对该库的类型检查。
四、WebpackDevServer进阶操作
1. WebpackDevServer实现请求转发
一般情况下我们可以通过 charles fiddler 工具在本地搭建一个代理服务器。通过这台代理服务器将我们想要请求的接口地址进行转发。
那在 webpack 中给我们提供了一个工具 devServer.Proxy 。接下来我们在 webpack.config.js 中进行配置具体代码如下
module.exports {devServer: {proxy: {/react/api: {target: http://www.mondaylab.com,//实现对https网址的请求转发secure: false,bypass: function(req, res, proxyOptions){//如果请求的内容是一个html地址那么就直接返回根路径下index.html的内容if(req.headers.accept.indexOf(html) ! -1){console.log(Skipping proxy for browser request);return ./index.html;// return false; //表示如果遇到html请求那么该给你返回什么就返回什么}},//在前端请求时写header.jsonwebpack会间接的帮我们拿到demo.json的数据请求转发】pathRewrite: {header.json: demo.json},//如果有一些网站做了防爬虫那么我们可能没办法进行跨域。需要进行如下配置就可以突破对origin的限制changeOrigin: true,// 在请求头中自定义一些内容headers: {host: www.mondaylab.com,//在做请求转发时模拟一些登录等操作cookie: gfhgfh}}}}
}2. WebpackDevServer解决单页面应用路由问题
对于现代的的主流框架来说像 vue.js 、React.js 等等框架基本都是单页面应用。那么在单页面应用里比如我们想要从 http://mondaylab.com 跳转到 http://mondaylab.com/list 该怎么样进行跳转呢
这就要谈到一个单页面应用的路由问题。我们需要在 webpack.config.js 中进行如下配置
module.exports {devServer: {//第一种方式historyApiFallback: true,/*等同于historyApiFallback: {rewrites: [{from: /\.*\/,to: /list.html/}]}*//*第二种方式historyApiFallback: {rewrites: [{from: /abc.html/,//进行转换当访问abc.html时会把list.html的内容展示出来to: /list.html/}]}*//*第三种方式更为灵活historyApiFallback: {rewrites: [{//表明在做页面的替换时通过一个函数function的形式结合context的一些参数//做一些js的逻辑放在里面来决定最终它跳转到哪from: /^\/(libs)\/.*$/,to: function(context){return /bower_components context.match[0];}}]}*/}
}值得注意的是 historyApiFallback 只能用于开发环境下。如果到了线上环境的话需要让后端的小伙伴去 nginx 或者 apache 上仿照 webpackDevServer 的一些配置在后端的服务器上做同样的配置配置之后前端才可以使用对应的路由。
五、ESLint在Webpack中的配置
1. ESLint是什么
在我们日常的团队开发中每个人写的代码都各式各样比如有的人喜欢在代码后边加个分号有的人又不喜欢加。这间接地就很容易导致我们项目的可维护性变差了。因此呢我们就引入了 ESLint 这个内容来约束的代码规范让项目的可维护性和可扩展性变高。
那 ESLint 在 Webpack 中是怎么样配置的呢
2. 如何安装ESLint
第一步 安装 ESLint 工具。具体命令如下
npm install eslint --save-dev第二步 约束我们的代码。我们需要新建一个配置文件来对我们的ESLint规范进行配置。具体命令如下
npx eslint --initUse a popular style guide 使用通用的代码检测模板AirbnbDo you use React 根据自身需求填y或者nJavascriptWould you like to install them now with npm? Y第三步 使用 eslint 检测代码规范。具体代码如下
npx eslint src以上代码表示的是使用eslint来检测src目录下的代码规范。
3. 为什么要在webpack中配置ESLint
在上面中我们了解到每个开发的小伙伴都可以用命令行来检测自己的代码规范但是如果每回写完一次代码我们都要去运行这样的命令才能看我们的代码写的合不合理这样会不会就有点麻烦了。同时我们又也不能保证每个人的 eslint 的代码规范设置是不是一样的。
因此我们可以在 webpack 中来进行配置解决上述所说的问题。具体步骤如下
第一步 安装 eslint-loader 。具体命令行如下
npm install eslint-loader --save-dev第二步 配置 webpack.config.js 。具体代码如下
module.exports {devServer: {/*当我们运行webpack做打包时一旦代码出现规范问题webpack将会在浏览器上弹出一个报错层来提示我们*/overlay: true },module: {rules: [{ test: /\.js$/, exclude: /node_modules/, use: [babel-loader, eslint-loader]}]}
}了解完基础配置之后接下来我们来了解一些 eslint-loader 的一些其他配置。具体代码如下
module.exports {module: {rules: [{ test: /\.js$/, exclude: /node_modules/, use: [babel-loader, {loader: eslint-loader,options: {//如果代码有一些比较浅显的问题eslint-loader将会帮助我们自动修复fix: true,//降低eslint在打包过程中对项目性能的损耗cache: true},//强制eslint-loader先执行fore: pre}]}]}
}️六、Webpack性能优化
细心的小伙伴可能已经发现webpack的打包速度有时候可能会有一点点慢。这间接地会浪费我们很多不该浪费的时间。所以接下来就来谈谈提升 Webpack 打包速度的几种方法。
1. 跟上技术的迭代(Node,Npm,Yarn)
如果我们想提升 webpack 的打包速度我们可以升级 webpack 的版本或者升级我们的node、npm管理器或者yarn的版本。
那为什么升级这些工具可以提升 webpack 的打包速度呢。
大家想一下 webpack 在做每一个版本的更新时内部肯定会做很多版本的优化因此当我们做 webpack 的版本更新时在速度上肯定会有所提升。 node 、 npm 、 yarn 的更新也是同样的道理。
试想一下如果不提升那它升级的意义又在哪呢对吧。
2. 在尽可能少的模块上应用Loader
一般情况下第三方模块的库都是已经进行打包编译过的所以我们需要在引入 loader 来进行编译时对 node_module 的文件给忽略掉或者只在某个文件夹下使用某个 loader 以此来增加我们的打包速度。我们可以在 webpack.config.js 中进行配置具体代码如下
module.exports {module: {rules: [{ test: /\.js$/, exclude: /node_modules/,//或者以下这种方式-include//include: path.resolve(__dirname, ../src),use: [{loader: babel-loader}]}]}
}当然依据上面这个思路还有其他的 loader 也都有其相对应的注意事项这里不再展开细述。
3. 合理使用插件
插件要合理的使用不要使用那些冗余的没有意义的插件。同时呢也要选择那些性能比较好的官方认可的插件来使用这样可以有效的来提升 webpack 的打包速度。
4. resolve参数合理配置
1常见配置
有时候我们想要对我们引入的文件进行一些自定义的配置该怎么处理呢具体配置如下
module.exports {resolve: {extensions: [js, jsx],/*** 1.当你只引入一个目录时比如 import Child from ./child/child * 这个时候webpack不知道我们具体是要引入哪个文件* 那么会先去找index文件如果找不到那它会继续去找child文件*/mainFiles: [index, child],/*** alias, 顾名思义是别名。* 比如想要将某个文件的引入方式改为自己的名字* import Child from ./Child - import Child from monday*/alias: {monday: path.resolve(__dirname, ../src/Child),}},
}接下来对以上的几个参数进行详细讲解。
2参数讲解
1extensions
比如当引入 import Child from ./child/child 时会先去找 ./child/child.js 文件找不到再去找 ./child/child.jsx 文件。一般不配置css和图片文件因为css和图片可能数量会比较多相应的会去执行很多次查找。间接地本来想提升性能结果又变成了浪费性能了。所以如果是像 css 和 jpg 等之类的资源文件应该进行显式的引入如果是像 js 和 jsx 之类的逻辑文件可以在 extesions 中配置进行显式的引入。
2mainFiles
当你只引入一个目录时比如 import Child from ./child/child 这个时候 webpack 不知道我们具体是要引入哪个文件那么会先去找 index 文件如果找不到那它会继续去找 child 文件。
3alias
alias , 顾名思义是别名。比如想要将某个文件的引入方式改为自己的名字 → import Child from ./Child - import Child from monday 。常用于多层级目录的情况下。
5. 使用DllPlugin提高打包速度
有时候我们希望引入的第三方模块只在第一次做打包的时候进行分析而后续再做打包时就不要再进行分析了。那该怎么处理呢
第一步 新建 webpack.dll.js 文件并进行配置。具体代码如下
const path require(path);
const webpack require(webpack);module.exports {mode: production,entry: {//此处填写我们想要单独进行打包的第三方库名vendors: [react, react-dom, lodash]},output: {filename: [name].dll.js,path: path.resolve(__dirname, ../dll),/*用library把第三方模块里面的所有代码通过全局变量的方式暴露出去*/library: [name]},plugins: [/*暴露完成之后借助DllPlugin插件对暴露出来的模块代码进行分析最终生成manifest.json的文件 */new webpack.DllPlugin({//对生成的vendors的库进行DllPlugin的分析(文件映射)name: [name],// 分析结果所放的路径分析之后结合全局变量在common.js中进行配置path: path.resolve(__dirname, ../dll/[name].manifest.json)})]}第二步 安装 add-asset-html-webpack-plugin 插件。具体命令如下
npm install add-asset-html-webpack-plugin --save第三步 配置 webpack.common.js 文件。具体配置如下
const AddAssetHtmlWebpackPlugin require(add-asset-html-webpack-plugin);
const webpack require(webpack);module.exports {entry: {main: ./src/index.js,plugins: [new HtmlWebpackPlugin({template: src/index.html}), /*** 指的是要往HtmlWebpackPlugin插件生成的index.html中添加一些内容*/new AddAssetHtmlWebpackPlugin({filepath: path.resolve(__dirname, ../dll/vendors.dll.js)}),/*** 1.使用DllReferencePlugin插件* 这个插件会到../dll/vendors.manifest.json中找第三方模块的映射关系* 如果能找到映射关系那么webpack就会知道这个第三方模块没有必要再打包进来了* 直接从vendors.dll.js中拿过来用就可以了* 2.如果发现并不再映射关系里面那么才会再到node_modules中去找* */new webpack.DllReferencePlugin({manifest: path.resolve(__dirname, ../dll/vendors.manifest.json)})]}
}第四步 配置 package.json 文件。具体代码如下
{scripts: {build:dll: webpack --config ./build/webpack.dll.js}
}通过运行 npm run build:dll 命令来实现对第三方库的打包。
6. 控制包文件大小
在我们做项目打包时我们应该让我们打包生成的文件尽可能的小。有时我们在写代码的时候经常会在页面里面引入一些没有用的模块也就是引入一些我们使用的模块。
这个时候如果你没有配置 Tree-Shaking 就会很容易造成打包的时候出现大量冗余的代码。这些冗余代码呢间接地就会拖累我们 webpack 的打包速度。
所以呢我们在做打包时要控制好文件的大小。具体步骤参考如下
配置 Tree-shaking 通过 SplittingChunk 来将一个大的文件分割成多个小的文件。
7. 多进程打包
webpack 是通过node来运行的所以它的打包过程是单线程的。那有时候呢我们也可以借助 node 里面的多进程来帮助我们提升 webpack 的打包速度。
常见工具有 thread-loader parallel-webpack happypack 等工具大家可以依据自身需求查找相关资料选出最适合自己项目的工具进行打包。这一块不再进行详细讲解~
8. 合理使用sourceMap
通常情况下 sourceMap 越详细那么打包的速度就会越慢。所以在做打包的时候要根据当前是开发环境还是生产环境选出最合适的 sourceMap 配置来生成我们对应的代码调错文件。
这样一方面能保证我们即使发现代码里的错误问题。另一方面呢也可以尽可能地提升打包速度。
9. 结合 stats 分析打包结果
在打包项目时我们可以通过命令来生成这次打包情况的 stats 文件之后呢通过借助一些线上或者本地的打包分析工具来达到分析我们本次打包过程中的打包情况。
比如说分析哪个模块打包的时间比较长哪个模块打包分析的时间比较短等等内容依据具体的情况进行优化。
10. 开发环境内存编译
使用 webpackDevServer 来进行编译它不会把打包生成的文件放在 dist 目录中去而是把其放到了我们电脑的内存中。
11. 开发环境无用插件剔除
比如说我们在开发环境的情况下并不需要对代码进行压缩。因此对应的压缩插件我们就不要在开发环境中配置只在生产环境中配置就好了。这样可以减少一些不必要的打包时间。
️七、多页面打包配置
通常情况来说但凡我们在做打包的时候基本上都是对单页面应用做打包。什么是单页面呢也就是只有一个 index.html 文件。像目前比较主流的框架 vue 和 react 等框架都是单页面应用。但是如果像一些比较老的框架比如 jquery 和 zepto 可能就需要进行多页面应用打包。
因此顺着这个话题我们来谈谈在 webpack 中如何对多页面应用进行打包配置。
我们在 webpack.common.js 中进行配置具体代码如下
const HtmlWebpackPlugin require(html-webpack-plugin);
module.exports {entry: {//引入多个入口文件main: ./src/index.js,list: ./src/list.js},plugins: [new HtmlWebpackPlugin({template: src/index.html,filename: index.html,//chunk表明这些html文件要引入的文件有哪些chunks: [runtime, vendors, main]}),new HtmlWebpackPlugin({template: src/index.html,filename: list.html,chunks: [runtime, vendors, list]})]
}通过以上代码我们可以知道增加 entry 和 plugins 的配置来增加多个入口页面从而达到了多页面应用配置的效果。
八、结束语
通过上文的讲解相信大家对 webpack 在一些场景中的实战配置有了一定的了解。上面讲述的也是比较浅显的内容大家可以根据相对应的知识点进行知识面的拓宽以便更好的应用到实际的项目当中。
到这里关于 webpack 的实战案例配置就讲解结束啦希望对大家有帮助~
如文章有误或有不理解的地方欢迎小伙伴们评论区留言哦
本文代码已上传至公众号后台回复关键词 webpack 即可获取~
彩蛋 One More Thing
往期推荐
webpack入门基础知识不会webpack的前端可能是捡来的万字总结webpack的超入门核心知识webpack入门进阶知识webpack入门核心知识还看不过瘾速来围观进阶知识
番外篇 关注公众号星期一研究室第一时间关注优质文章更多精选专栏待你解锁~如果这篇文章对你有用记得留个脚印jio再走哦~以上就是本文的全部内容我们下期见
