webpack入门4----优化环境配置（下）

需要先安装：

npm install --save-dev workbox-webpack-plugin

这个主要是使用插件  workbox-webpack-plugin

安装完成了，对webpack.config.js的配置如下：

/*

PWA：渐进式网络开发应用程序（离线可访问）

workbox --> workbox-webpack-plugin

*/

const { resolve } = require(‘path’);

const HtmlWebpackPlugin = require(‘html-webpack-plugin’);

const WorkboxWebpackPlugin = require(‘workbox-webpack-plugin’);

process.env.NODE_ENV = ‘production’;

module.exports = {

entry: [‘./src/js/index.js’, ‘./src/index.html’],

output: {

filename: ‘js/built.js’,

path: resolve(__dirname, ‘build’),

},

module: {

rules: [

// loader的配置

{

// 处理less资源

test: /.less$/,

use: [‘style-loader’, ‘css-loader’, ‘less-loader’],

},

// css文件是放置在js文件内的，不需要单独文件夹存放

{

// 处理css资源

test: /.css$/,

use: [‘style-loader’, ‘css-loader’],

},

{

// 处理图片资源

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

loader: ‘url-loader’,

options: {

limit: 8 * 1024,

name: ‘[hash:10].[ext]’,

// 关闭es6模块化

esModule: false,

outputPath: ‘imgs’,

},

},

{

// 处理html中img资源

test: /.html$/,

loader: ‘html-loader’,

options: {

esModule: true,

},

},

{

// 处理其他资源

exclude: /.(html|js|css|less|jpg|png|gif)/,

loader: ‘file-loader’,

options: {

name: ‘[hash:10].[ext]’,

outputPath: ‘media’,

},

},

],

},

plugins: [

// plugins的配置

new HtmlWebpackPlugin({

template: ‘./src/index.html’,

}),

new WorkboxWebpackPlugin.GenerateSW({

/*

1.帮助serviceworker快速启动

2.删除旧的 serviceworker

生成一个 serviceworker 配置文件

*/

clientsClaim: true,

skipWaiting: true,

}),

],

mode: ‘production’,

devServer: {

contentBase: resolve(__dirname, ‘build’),

compress: true,

port: 3000,

open: true,

// 开启HMR

// 当修改了webpack配置，新配置想要生效，必须重启webpack服务

hot: true,

},

devtool: ‘eval-source-map’,

};

9.多线程打包

安装thread-loader

npm install --saave-dev thread-loader

webpack.config.js的loader位置的代码，在打包js的时候开启多进程打包。

{

test: /.js$/,

exclude: /node_modules/,

use: [

/*

开启多进程打包

进程启动大概为600ms，进程通信也有开销

只有工作消耗时间比较长，才需要多进程打包

*/

{

loader: ‘thread-loader’,

options: {

workers: 2, // 进程两个

},

},

{

loader: ‘babel-loader’,

options: {

presets: [

[

‘@babel/preset-env’,

{

useBuiltIns: ‘usage’,

corejs: { version: 3 },

targets: {

chrome: ‘60’,

firefox: ‘50’,

},

},

],

],

},

},

],

},

10.externals

这个的作用主要是在html内引入了某些框架的cdn等其他文件，在打包的时候不需要打包

const { resolve } = require(‘path’);

const HtmlWebpackPlugin = require(‘html-webpack-plugin’);

module.exports = {

entry: ‘./src/js/index.js’,

output: {

filename: ‘built.js’,

path: resolve(__dirname, ‘build’),

},

plugins: [

new HtmlWebpackPlugin({

template: ‘./src/index.html’,

}),

],

mode: ‘production’,

externals: {

// 通过cdn引入速度更快

// 格式：忽略库名 --> npm包名

jquery: ‘jQuery’, // 拒绝jQuery被打包进来

},

};

10.dll

使用dll技术对某些库(第三方库：jquery、react、vue)进行单独打包

当运行webpack时，默认查找webpack.config.js配置文件

需求：需要运行webpack.dll.js文件

–>  指令（运行）：webpack --config webpack.dll.js

安装：add-asset-html-webpack-plugin

配置

webpack.config.js

const { resolve } = require(‘path’);

const HtmlWebpackPlugin = require(‘html-webpack-plugin’);

const webpack = require(‘webpack’);

const AddAssetHtmlWebpackPlugin = require(‘add-asset-html-webpack-plugin’);

module.exports = {

entry: ‘./src/js/index.js’,

output: {

filename: ‘built.js’,

path: resolve(__dirname, ‘build’),

},

plugins: [

new HtmlWebpackPlugin({

template: ‘./src/index.html’,

}),

// 下面的重点是优化了jquery重复打包的性能

// 告诉webapck哪些库不参与打包，同时使用时得到名称也得变 打包时先忽略jquery

new webpack.DllReferencePlugin({

manifest: resolve(__dirname, ‘dll/manifest.json’),

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**

[外链图片转存中…(img-h1qdwfcc-1715023656175)]

[外链图片转存中…(img-CxgzX6wh-1715023656176)]

[外链图片转存中…(img-IItEPGdn-1715023656176)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！