深入探讨Webpack的使用，包括模块化历程、配置与优化技巧。覆盖基础配置、资源加载、插件使用、Vue集成及懒加载策略，助你提升前端工程化水平。
webpack基础
01-模块化历程
起初，js没有模块化概念，导致出现一些问题：
- 容易造成变量污染
- 文件之间的依赖关系模糊
浏览器端模块化：异步模块化规范
- require.js 是AMD规范 （异步模块化规范） 依赖前置
- sea.js 说CMD规范（通过模块化规范 异步） 依赖就近
Nodejs模块化：同步模块化规范
- CommonJS规范
- 导出：module.exports
- 导入：require
ES6模块化：同步模块化规范
- 默认导出 export default
- 导入 import xxx from ‘xxx’
在浏览器端无法使用，Es6的模块化，需要使用打包工具，将基于Es6的的模块打包在一起。
02-webpack-介绍
- 中文官网：http://www.webpackjs.com
- 官方网站：https://webpack.js.org
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
- webpack是基于Nodejs的命令行工具
- 默认的作用是打包JS模块资源，不需要对js文件进行导入导出操作
- 当然配置加载器后，可以打包所有类型的资源文件。
- 也通过安装插件，可以对输出结果进行修改。
- 最后可以支持项目开发环境，提供服务器功能(localhost)。
学习目的：
- 了解webpack这个工具基础使用
- 基于vue-cli可以自行修改一些默认配置
03-webpack-安装
全局安装：
npm i webpack -g
npm i webpack-cli -g
- 安装后，可以在全局使用命令
webpack，但是不建议全局安装，因为各个项目依赖的版本不一样，全局更新后将影响，其他版本的项目。
推荐本地项目单独使用：
注意：本地项目文件夹的命名不可以是webpack或webpacks，否则安装不成功
- 初始化项目 配置package.json的文件
npm init -y
- 安装 --save-dev 简写 -D 安装到开发依赖
npm i webpack -D
npm i webpack-cli -D
- node_modules下配置package.json
{
"scripts":{
//"start":"nodemon app.js",
"build":"webpack"
}
}
- 调用webpack工具
npm run build
第一次使用webpck打包：必须有src目录，默认入口文件是index.js。
04-webpack-打包模式（mode）
- 需要在配置文件下进行配置
- 默认的配置文件名称是：webpack.config.js
module.exports = {
//development 开发模式打包 代码不压缩，打包速度快 没做优化处理
//production 生产模式(线上运行)打包 打包速度慢 做了一些优化处理，压缩
mode: 'development' // 开发模式打包
}
05-webpack-入口与出口
- 默认入口是 src下的index.js文件,注意引入时的路径
- 默认出口是 dist 目录下的 main.js 文件–是一个默认的压缩文件
src/index.js入口文件：
默认的配置文件是：webpack.config.js
//配置绝对路径
const path = require('path');
module.exports = {
// 打包的入口文件 默认加载./src/index.js
entry: './src/index.js',
// 打包结果的输出的出口文件 文件夹默认生产=成文件夹dist
output: {
// 必须指定的是绝对路径
path: path.join(__dirname, './dist'),
filename: 'main.js'
}
};
- 在命令行中，输入如下，检测是否打包成功
npm run build
06-webpack-打包css
第一步：创建文件 src/index.html,引入main.js文件，
第二步：创建calc.js功能文件，打开html网页，按F12，可以显示打印出来——30，检测webpack默认打包成功
应用：打包css文件，并进行页面显示验证
第三步：在src下，创建静态资源文件夹assets,新建src/assets/css/index.css文件
第四步：模块化开发，让css文件生效，需要在src/index.js入口文件中进行引入
第五步：webpack.config.js中配置文件，因为webpack默认打包js文件，如果引入其他格式css文件，需要用对于的加载器插件处理该文件，把代码解析成js文件，才可以加载css等格式文件
- 命令行(开发依赖)中安装css加载包
npm install --save-dev style-loader css-loader
- webpack.config.js中配置文件
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
},
//加载器配置
+ module: {
//加载规则
+ rules: [
+ {
//加载后缀名.css文件
+ test: /\.css$/,
//loader 加载器，解析器
//执行按照 从下往上执行
//通过css-loader加载了css代码，通过style-loader 把加载代码追加到style标签上进行预览
+ use: [
+ 'style-loader',
+ 'css-loader'
+ ]
+ }
+ ]
+ }
};
第七步：命令行中运行代码：
npm run build
第八步：打开html文件，检测css样式是否生效
webpack配置文件目录如下：
07-webpack-打包less
应用：打包less文件，并进行页面显示验证
第一步：在src下，创建样式文件夹styles,新建src/styles/index.less文件
第二步：模块化开发，让less文件生效，需要在src/index.js入口文件中进行引入
第三步：webpack.config.js中配置文件，因为webpack默认打包js文件，如果引入其他格式less文件，需要用对于的加载器插件处理该文件，把代码解析成js文件，才可以加载less等格式文件
- 在webpack官网，没有直接less-loader加载器，需要进行输入框关键字“less-loader”搜索，
https://webpack.js.org/loaders/less-loader/#root
- 注意：less-loader 依赖 less 的，所以提前在命令行 安装 less 模块。
npm install less-loader --save-dev
- webpack.config.js中配置文件
const path = require('path')
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
path: path.resolve('./dist'),
filename: 'main.js'
},
//加载器配置
module: {
//加载规则
rules: [
{
//加载后缀名.css文件
test: /\.css$/,
//loader 加载器，解析器
//执行按照 从下往上执行
//通过css-loader加载了css代码，通过style-loader 把加载代码追加到style标签上进行预览
use: [
'style-loader',
'css-loader'
]
},
//加载后缀名.less文件
//less-loader less解析成css，需要依赖Less核心包
+ {
+ test: /\.less$/,
+ use: [
+ 'style-loader', //3.把css放到节点里面进行编译
+ 'css-loader', //2.加载css
+ 'less-loader' //1.编译less
+ ]
+ }
]
}
}
第四步：安装less核心包
npm install --save-dev less
第五步：命令行中运行代码：
npm run build
第六步：打开html文件，检测less样式是否生效
注意：
打包less，命令行一共需要安装下面4个包
npm install --save-dev style-loader css-loader less less-loader
08-webpack-打包图片
第一步：在src/assets下，创建图片文件夹images,新建src/assets/images/logo.png文件
第二步：webpack.config.js中配置文件，因为webpack默认打包js文件，如果引入其他格式图片文件，需要用对应的加载器插件处理该文件，把代码解析成js文件，才可以加载图片等格式文件
- 命令行(开发依赖)中安装图片加载包
npm install --save-dev file-loader
- webpack.config.js中配置文件
onst path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
+ {
//加载后缀名.png|svg|jpg|gif 等图片格式文件
+ test: /\.(png|svg|jpg|gif)$/,
//使用图片加载器 加载图片
+ use: [
+ 'file-loader'
+ ]
+ }
]
}
};
第三步：把图片作为背景图使用，让less文件生效，同样在src/index.js入口文件中进行引入less文件
第四步：手动修改html文件路径
第五步：命令行运行代码，图片预览成功
注意：
此种手动修改index.html文件的路径，非正常操作方式
09-webpack-打包字体文件
第一步：在src/assets下，创建字体文件夹fonts,新建src/assets/fonts/font.ttf文件
第二步：在src/styles/index.less中：
// 定义一个字体
@font-face{
font-family: "hm-79"; //字体名字
src: url(../assets/fonts/font.ttf) format('truetype'); //路径和固定格式
}
// 使用这个字体 所有p标签
p{
font-family: hm-79
}
第三步：在新复制的dist/index.html中，对比字体样式
第四步：webpack.config.js中配置文件，因为webpack默认打包js文件，如果引入其他格式字体文件，需要用对应的加载器插件处理该文件，把代码解析成js文件，才可以加载图片等格式文件
- 命令行(开发依赖)中安装字体加载包file-loader，打包图片时已安装则忽略
npm install --save-dev file-loader
- webpack.config.js中配置文件即可
+ {
//加载后缀名.woff|woff2|eot|ttf|otf 等字体格式文件
+ test: /\.(woff|woff2|eot|ttf|otf)$/,
//使用字体加载器 加载字体
+ use: [
+ 'file-loader'
+ ]
+ }
第五步：命令行运行代码，打包
npm run build
打包成功后，dist文件夹下会生成一个字体文件
打开新复制的dist/index.html，验证字体样式对比
10-webpack-生成html
应用——把外边的模板html代码自动生成到dist目录下
html插件（设定-htmlwebpackplugin）-可以把根目录下的index.html打包到dist目录
第一步：命令行 安装 打包插件
npm install --save-dev html-webpack-plugin
第二步：webpack.config.js中配置文件即可
// 导包 生成html在dist目录下
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
第三步： //插件配置
+ plugins: [
//实例化插件
+ new HtmlWebpackPlugin({
//生成后的html的title
+ title: 'Output Management'
+ })
+ ],
};
第四步：命令行运行代码，打包
npm run build
打包成功后，dist文件夹下会生成一个全新的index.html文件
打开新生成的dist/index.html，验证html网页的title是否更新
注意：
该index.html文件不是复制品，是全新的html页面；
没有把根目录下的index.html中的div和span元素渲染出来
如果你想要了解更多 HtmlWebpackPlugin 插件提供的全部功能和选项，那么你就应该多多熟悉 HtmlWebpackPlugin 仓库。下拉页面，找到Options，在下面找对应的选件属性
使用自己的文件做为模版：
+ plugins: [
+ new HtmlWebpackPlugin({
//以index.html为模板，在dist下生成index.html
+ template: 'index.html'
+ })
+ ],
第五步：命令行运行代码，打包
npm run build
打包成功后，dist文件夹下会生成一个新的index.html文件，
打开新生成的dist/index.html，验证该html网页是否和根目录下的index.html文件内容一致
第六步：删除根路径下的index.html文件中手动导入的main.js模块
第七步：命令行中重新启动，并打开html文件，显示最终页面效果
11-webpack-清理dist
-
在每次打包前，清空dist目录。
用英文版（指定清理dist）https://webpack.js.org/guides/output-management/#cleaning-up-the-dist-folder
第一步：命令行 安装 打包插件
npm install clean-webpack-plugin --save-dev
第二步：webpack.config.js中配置文件即可
+ const {CleanWebpackPlugin} = require('clean-webpack-plugin');
plugins: [
+ new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'Output Management'
})
],
// 导包
//const CleanWebpackPlugin = require('clean-webpack-plugin'); 中文版本
+ const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {
第三步： //插件配置
+ plugins: [
//实例化插件 把目录传进去
//new CleanWebpackPlugin(['dist']), 会报错
+ new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
//生成后的html的title
title: 'Output Management'
})
],
};
第四步：命令行运行代码，打包
npm run build
打包成功后，dist文件夹下自动清理无效文件
12-webpack-babel介绍
-
目前部分浏览器和 Node.js 已经支持 ES6，但由于它们对 ES6 所有的标准支持不全，这导致在开发中不敢全面地使用 ES6。——为了兼容IE浏览器优化
-
Babel 是一个 JavaScript 编译器，能将 ES6 代码转为 ES5 代码，让你使用最新的语言特性而不用担心兼容性问题，把采用 ES6 编写的代码转换成目前已经支持良好的 ES5 代码。
-
英文官网：https://babeljs.io/
中文官网：https://www.babeljs.cn/
13-webpack-babel使用
在webpack官网-搜索关键字 babel-loader
babel-loader加载器插件包：https://webpack.js.org/loaders/babel-loader/#root
第一步：命令行安装包
npm install -D babel-loader @babel/core @babel/preset-env
第二步：webpack.config.js中配置文件即可
module: {
rules: [
{
//test 解析ES6语法为ES5语法
test: /\.m?js$/,
exclude: /(node_modules|bower_components)/, //排除 第三方包
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
}
第三步：命令行运行代码，打包
npm run build
打包成功后，main.js文件中会看到cost—>var，箭头函数转普通函数等语法；
说明babel插件包，已经验证生效
附：
以上操作是语法解析，但是ES6还更新了一些高阶函数。此时，需要依赖另一个包polyfill
见babel官网—>Docs—>polyfill
中文版 https://www.babeljs.cn/docs/babel-polyfill
第四步：命令行 安装polyfill
npm install --save @babel/polyfill
使用：必须优先导入模块，之后的js才可以使用当前模块提供的函数（实现了ES6提供的高阶函数）
第五步：为了支持ES6高阶函数，在src/index.js中首行导入
import "@babel/polyfill";
或者：
module.exports = {
entry: ["@babel/polyfill", "./src/index.js"],
};
第六步：命令行运行代码，打包
npm run build
打包成功后，命令行中显示main.js的内存增大到456kb左右
14-webpack-sourceMap——为了更容易地追踪代码错误和警告
项目打包后，dist解析的代码位置相较于源代码会发生变化
为了更容易地追踪错误和警告，JavaScript 提供了 source map 功能，将编译后的代码映射回原始源代码。如果一个错误来自于 b.js，source map 就会明确的告诉你。——功能：会记录代码打包后，所在源代码中的位置；发生错误时，会准确显示在第几行
webpack官网—>中文文档—>指南—>开发—>使用source map
错误冗余代码
第一步：webpack.config.js中配置文件即可
//导包
module.exports = {
第二步： //插件配置
+ devtool: 'inline-source-map',
plugins:[
]
};
第三步：命令行运行代码，打包
npm run build
打包成功后，打开网页，F12精确显示错误代码具体位置
source-map配置前：
source-map配置后：
15-webpack-watch监听——监听到代码变化，自动实现打包
可以指示 webpack “watch” 依赖图中的所有文件以进行更改。如果其中一个文件被更新，代码将被重新编译，所以你不必手动运行整个构建。
- webpack官网—>中文文档—>指南—>开发—>使用观察模式：
我们添加一个用于启动 webpack watch mode 的 npm scripts：
在package.json中进行配置：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ "watch": "webpack --watch",
"build": "webpack"
},
配置后，命令会自动监听文件代码的变化，自动完成构建和打包。命令光标不会停，一直闪烁监听文件变化
运行命令更改：npm run build ——> npm run watch
唯一的缺点是，为了看到修改后的实际效果，你需要刷新浏览器。如果能够自动刷新浏览器就更好了，因此接下来我们会尝试通过 webpack-dev-server 实现此功能。
16-webpack-dev-server——自动刷新浏览器进行实时的预览
webpack-dev-server 为你提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading),自动刷新浏览器进行实时的预览。
第一步：命令行 装包
npm install --save-dev webpack-dev-server
第二步：webpack.config.js中配置文件服务器即可
//错误追踪
devtool: 'inline-source-map',
//服务器配置
+ devServer: {
+ contentBase: './dist' //指定 服务器 根目录
+ },
第三步：package.json设置启动命令脚本
"scripts": {
+ "serve": "webpack-dev-server --open", //启动服务设置 open-自动打开浏览器
第四步：执行：
npm run serve
修改完代码后，自动打包，自动刷新浏览器
- 不会把资源打包到磁盘（dist目录）中，存储在内存中。读取更快。
17-webpack-热更新——浏览器不刷新，更新打包后的结果
- 实现浏览器不刷新，更新打包后的结果，默认对js不生效，对样式生效。
第一步：webpack.config.js中配置文件服务器即可
+ const webpack = require('webpack');
module.exports = {
entry: {
- app: './src/index.js',
- print: './src/print.js'
+ app: './src/index.js'
},
devtool: 'inline-source-map',
//服务器配置
devServer: {
contentBase: './dist',
+ hot: true //2.开启热更新
},
//插件配置
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
title: '模块热替换'
}),
+ new webpack.HotModuleReplacementPlugin() //1.热更新模块配置
],
第三步：命令行运行代码，打包
npm run serve
打包成功后，打开网页
第四步：修改文件代码后，观看页面刷新按钮，验证热更新效果
18-webpack-打包vue文件
vue-loader不是webpack提供的，而是vue本身提供的：
Vue Loader 是一个 webpack 的 loader，它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件：
手动配置vue-loader：
第一步：命令行中 安装vue包
npm i vue
-
在入口文件index.vue中进行导入
import Vue from ‘vue’
第二步：新建src/APP.vue文件 1
第三步：vue组件文件 在 入口文件index.vue中 进行引入 2
第四步：命令行 安装包
vue-loader：加载vue文件内容 vue-template-compiler：编译成组件配置对象
npm install -D vue-loader vue-template-compiler
第五步：webpack.config.js中进行加载器配置
// 加载vue文件
+ const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
module: {
rules: [
// ... 其它规则
+ {
+ test: /\.vue$/,
+ loader: 'vue-loader'
+ }
]
},
plugins: [
// 请确保引入这个插件！
+ new VueLoaderPlugin()
]
}
第六步：npm run serve 后，页面显示正常，说明 vue-loader 加载器配置成功
第七步：把vue组件 挂载到 html网页上 3
第八步：在入口文件index.js中 创建vue实例 4
第九步：命令行运行npm run serve启动服务器后，打开页面，验证vue组件文件在页面是否渲染成功 5
19-webpack-路径别名——@符设置src下文件的绝对路径
基于webpack，可以使用@符设置src下文件的绝对路径
入口文件index.js修改 vue文件的 绝对路径
第一步：webpack.config.js中进行加载器配置
//解析路径
resolve: {
//别名
alias: {
//resolve 获取绝对路径的API，join也可以获取; @ 也可以用 $,就是个 别名
'@': path.resolve(__dirname, './src') // 设置 src的绝对路径
}
},
注意： webpack.config.js修改之后，要重启服务器
第二步：npm run serve ,打开页面验证vue组件内容显示正常
20-webpack-文件后缀——省略.vue等文件后缀，页面同样生效
入口文件index.js删除 APP.vue文件的 后缀名 .vue
第一步：webpack.config.js中进行加载器配置
//解析路径
resolve: {
alias: {
'@': path.resolve(__dirname, './src')
},
//省略后缀
+ extensions: ['.js', '.vue', '.json', '.css'] //后缀名 可以根据需要自由增减
},
**注意：**webpack.config.js修改之后，要重启服务器
第二步：npm run serve ,打开页面验证vue组件内容显示正常
21-webpack-打包部署——路由懒加载 解决 首屏加载慢 的问题
路由懒加载 解决 登录页首屏加载慢 的问题
-
原因：所有第三包打包在一起，资源体积比较大，会导致资源运行时比较慢
- echarts包体积比较就比较大，且是局部使用，可以单独进行引入，不需要作为第三方包一起打包
- 所有的vue组件也是一次性集中访问，导致加载比较慢
npm run build
首屏加载慢
- 在显示页面，获取所有的资源
打包后的文件比较大（chunk-vendors第三方包代码合并在一起）（app自己写代码合并在一起）
- 方案：
- 按需加载需要的资源——就是路由懒加载。
- 路由懒加载
const Foo = () => import('./Foo.vue')
在打包的时候，对你组件依赖代码进行分割，分块。不会合并在一起后再加载
第一步：对项目的入口文件src/router/index.js进行修改
- 修改前：
- 修改后：
路由加载方式，成为路由懒加载模式，可以对每个路由组件依赖的代码进行分块，加载页面时按需加载
第二步：运行代码
npm run build
之前打包后显示4个文件，现在会分开显示所有文件，且文件资源体积相比之前有所减小，但某些文件仍然较大
22-webpack-打包优化——体积较大的第三方包，使用cdn的安装方式进行加载
-
体积较大的第三方包，使用cdn的方式进行加载。
专门第三方cdn库：https://www.bootcdn.cn/
-
cdn 是其他的服务方给开发者提供的静态资源
vue和element-UI都有cdn安装方式
vue安包：https://cn.vuejs.org/v2/guide/#起步
element-UI安包：https://element.eleme.cn/#/zh-CN/component/installation
-
使用cdn之后，项目中不需要去导入对应的包。
-
import echarts from ‘echarts’ 不需要导入
-
手动的注释即可
-
在webpack打包的时候，忽略这些导入，不去打包即可。
- 加配置
webpack-外部扩展格式：https://www.webpackjs.com/configuration/externals/#externals
- 基于vue-cli开发的项目，添加额外配置，要新建vue.config.js这个配置文件
配置vue.config.js:https://cli.vuejs.org/zh/config/#vue-config-js
-
额外配置属性，如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。
configureWebpack：https://cli.vuejs.org/zh/config/#configurewebpack
第一步：新建vue.config.js这个配置文件（作为vue-cli配置页，也可以写webpack配置）
注意：需要额外配置时，才需要这个文件
-
-
第二步：public/index.html中， 添加第三方包的cdn安装方式链接
第三步：命令行打包
npm run build
执行后，dist文件被清理；echarts文件打包时被忽略，第三方包文件变小
打包体积变小，验证打包优化得以实现
扫一扫
2185
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
