-
那些你面试必须知道的webpack知识点
1、webpack介绍和简单使用
1.1 什么是webpack？
webpack 是一个模块打包器。webpack 的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换(transform)、打包(bundle)。
1.2 安装webpack
1.全局安装：
cnpm install webpack -g cnpm install webpack-cli -g- 1
- 2
也可以通过npm进行全局安装，最好的是使用cnpm，因为cnpm 服务部署在国内阿里云服务器上 ， 可以提高包的下载速度 官方也提供了一个全局工具包 cnpm ，操作命令与 npm 大体相同。
我们可以通过 npm 来安装 cnpm 工具
npm install -g cnpm --registry=https://registry.npmmirror.com- 1
安装webpack：
cnpm install webpack -g
安装webpack脚手架：cnpm install webpack-cli -g
2、测试版本
我们来测试一下版本
1.3 简单使用一下webpack
说明一下：webpack本身之前是打包js的，如果要打包：html、css…需要借助一些东西。
1、进入项目目录，随便创建一个js文件
2、在该目录中下载webpackcnpm install webpack -S- 1
- 2
此时该目录下会多出两个文件
3、在终端执行：webpack进行打包
它告诉我们index必须在src目录下面。
我们改下文件目录
再次打包
此时目录种会多出一个dist文件夹
我们打开main.js看看发生了什么变化
原index.js文件：
打包后对代码进行了压缩。2、webpack的入口与输出
2.1 入口(entry)
入口起点(entry point) 指示 webpack 应该使用哪个模块，来作为构建其内部 依赖图(dependency graph) 的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
默认值是 ./src/index.js，但你可以通过在
webpack configuration中配置 entry 属性，来指定一个（或多个）不同的入口起点。例如：
webpack.config.jsmodule.exports = { entry: './path/to/my/entry/file.js', };- 1
- 2
- 3
我们对上面的例子进行改造，将index.js改为script，如果此时直接打包则会报错，因为默认入口是index.js所以我们要改一下入口文件。
在webpack.config.js文件中进行改变。
打包：
2.2 输出(output)
output 属性告诉 webpack 在哪里输出它所创建的 bundle，以及如何命名这些文件。主要输出文件的默认值是 ./dist/main.js，其他生成文件默认放置在 ./dist 文件夹中。
你可以通过在配置中指定一个 output 字段，来配置这些处理过程：
webpack.config.js
const path = require('path'); module.exports = { entry: './path/to/my/entry/file.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'my-first-webpack.bundle.js', }, };- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
我们对上面的例子进行改造，改变出口位置。
打包：
文件目录：
3、入口多种配置方法
3.1 多文件打包成一个文件
问题：多个入口文件==》单文件出口
解决：将entry改成数组写法，即可。var path = require('path'); module.exports ={ entry:['./src/script.js','./src/a.js','./src/b.js'], output:{ path:path.resolve(__dirname, 'dist'), filename:'main.js', } }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
3.2 多文件打包成多文件
问题：多个入口文件==》多个文件出口
解决：将entry改成对象写法，key必须为文件名，值为文件路径，并且出口只写一个path即可，不要命名文件。var path = require('path'); module.exports ={ entry:{ script:'./src/script.js', a:'./src/a.js', b:'./src/b.js' }, output:{ path:path.resolve(__dirname, 'dist'), } }- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
4、loader的概念
webpack 只能理解 JavaScript 和 JSON 文件，这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中。
简单来说：就是webpack默认只能打包js和json文件，如果想打包html、css、图片等等类型的文件…就需要用到对应的loader。Warning：
webpack 的其中一个强大的特性就是能通过 import 导入任何类型的模块（例如 .css 文件），其他打包程序或任务执行器的可能并不支持。我们认为这种语言扩展是很有必要的，因为这可以使开发人员创建出更准确的依赖关系图。
在更高层面，在 webpack 的配置中，loader 有两个属性：1、test 属性，识别出哪些文件会被转换。
2、use 属性，定义出在进行转换时，应该使用哪个 loader。
webpack.config.jsconst path = require('path'); module.exports = { output: { filename: 'my-first-webpack.bundle.js', }, module: { rules: [{ test: /\.txt$/, use: 'raw-loader' }], }, };- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
我们对之前的例子进行改造，添加一个css样式，然后打包。
引入样式
css
var path = require("path"); module.exports = { entry: "./src/a.js", output: { path: path.resolve(__dirname, "dist"), filename: "main.js", }, module: { rules: [ { test: /\.css$/, //匹配任何以.css结尾的文件 use: ["style-loader", "css-loader"],//打包css需要的loader }, ], }, };- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
在打包前先安装这两个loader
进行打包：
打包后的main.js文件：
我们创建一个index.html文件引入打包后的main.js，看看js和css样式是否生效：DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Documenttitle> head> <body> <script src="./dist/main.js">script> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
生效，说明打包没有问题。
题外话：一般来说一个项目有特别多的loader，如果让我们一个一个下载，岂不是要疯了，所以一些框架，比如vue、react…等都是自动下载对应的loader，还有webpack的配置它也会自动生成，我们学习webpack主要是为了能够看到那些代码，并在项目需要时，更改一些配置。
不过大佬一般都能够自己配置webpack，哈哈哈哈。5、压缩打包HTML
webpack默认只打包javascript文件和json文件，但是我们项目不可能只打包js文件，必然还要打包html文件。
想要打包html文件，那就必须用到一个插件html-webpack-plugin5.1 使用步骤：
1、下载
cnpm install html-webpack-plugin- 1
2、引入var HtmlWebpackPlugin = require('html-webpack-plugin')- 1
3、配置
var path = require("path"); var HtmlWebpackPlugin = require('html-webpack-plugin') //引入 module.exports = { entry: "./src/index.js", output: { path: path.resolve(__dirname, "dist"), filename: "main.js", }, module: { rules: [ { test: /\.css$/, use: ["style-loader", "css-loader"], }, ], }, plugins: [new HtmlWebpackPlugin()],//添加配置 };- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
预格式化一下,方便阅读。
源文件：
你会发现打包后，title和div消失了，这是有问题的。主要是需要对
plugins: [new HtmlWebpackPlugin()],添加template配置项。var path = require("path"); var HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { entry: "./src/index.js", output: { path: path.resolve(__dirname, "dist"), filename: "main.js", }, module: { rules: [ { test: /\.css$/, use: ["style-loader", "css-loader"], }, ], }, plugins: [ new HtmlWebpackPlugin({ // 指定模板页面 template: "./src/index.html", }), ], };- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
查重新打包后：
我们也可以添加新的配置项
filename,改变默认输出文件名称。var path = require("path"); var HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { entry: "./src/index.js", output: { path: path.resolve(__dirname, "dist"), filename: "main.js", }, module: { rules: [ { test: /\.css$/, use: ["style-loader", "css-loader"], }, ], }, plugins: [ new HtmlWebpackPlugin({ // 指定模板页面 template: "./src/index.html", // 改变默认输出文件名称 filename: "hhh.html", }), ], };- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
5.2 如何进行多页面打包？
创建多个
new HtmlWebpackPluginvar path = require("path"); var HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { entry: "./src/index.js", output: { path: path.resolve(__dirname, "dist"), filename: "main.js", }, module: { rules: [ { test: /\.css$/, use: ["style-loader", "css-loader"], }, ], }, plugins: [ new HtmlWebpackPlugin({ // 指定模板页面 template: "./src/index.html", // 改变默认输出文件名称 filename: "index.html", }), new HtmlWebpackPlugin({ // 指定模板页面 template: "./src/hhh.html", // 改变默认输出文件名称 filename: "hhh.html", }), ], };- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
打包多个页面，必须设置filename配置项，配置项的值必须不同。
打包后：
5.3 如何多页面打包，并引入指定的js文件？
比如我们有这样一个需求：
有三个js文件，分别是index.js、jquery.js、hhh.js，
我需要让index.html压缩打包引入jquery.js、index.js，hhh.html压缩打包引入jquery.js、hhh.js。此时我们就需要用到这两个配置项：
chunks：允许插入到模板中的一些chunk，不配置此项默认会将entry中所有的thunk注入到模板中。在配置多个页面时，每个页面注入的thunk应该是不相同的，需要通过该配置为不同页面注入不同的thunk；excludeChunks: 这个与chunks配置项正好相反，用来配置不允许注入的thunk。1、改变entry入口配置
2、将output出口的filename删除
3、设置excludeChunks不允许注入哪些文件
注：前两条为什么这样设置，前文已经说过，若忘了，可往上翻阅文档。var path = require("path"); var HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { entry: { index: "./src/index.js", jquery: "./src/jquery.js", hhh: "./src/hhh.js", }, output: { path: path.resolve(__dirname, "dist"), }, module: { rules: [ { test: /\.css$/, use: ["style-loader", "css-loader"], }, ], }, plugins: [ new HtmlWebpackPlugin({ // 指定模板页面 template: "./src/index.html", // 改变默认输出文件名称 filename: "index.html", excludeChunks: ["hhh"], //不允许注入hhh.js文件 }), new HtmlWebpackPlugin({ // 指定模板页面 template: "./src/hhh.html", // 改变默认输出文件名称 filename: "hhh.html", excludeChunks: ["index"], //不允许注入index.js文件 }), ], };- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
打包后（已预格式化）方便阅读代码：
详细htm-webpack-plugin文档，可观看博客园的一个博主写的文章：
https://www.cnblogs.com/wonyun/p/6030090.html6、HTML加入图片
在index.html文件中插入图片，如果不配置对应的图片loader，则无法将图片打包。
原文件：
进行打包：
图片没有被打包。解决：
一、下载加载图片的loader >file-loader
二、下载让html支持图片的loader>html-withimg-loader
三、配置：在module对象中的rules数组中添加两个配置。var path = require("path"); var HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { entry: { index: "./src/index.js", jquery: "./src/jquery.js", hhh: "./src/hhh.js", }, output: { path: path.resolve(__dirname, "dist"), }, module: { rules: [ { test: /\.css$/, use: ["style-loader", "css-loader"], }, { test: /\.(png|jpg|jpeg|gif)$/, use: [ { loader: "file-loader", options: { esModule: false, outputPath: "img/", //让图片打包到img目录下，不配置该项默认是将图片和其他文件打包到同级 }, }, ], }, { test: /\.html$/, use: "html-withimg-loader", }, ], }, plugins: [ new HtmlWebpackPlugin({ // 指定模板页面 template: "./src/index.html", // 改变默认输出文件名称 filename: "index.html", excludeChunks: ["hhh"], //不允许注入hhh.js文件 }), new HtmlWebpackPlugin({ // 指定模板页面 template: "./src/hhh.html", // 改变默认输出文件名称 filename: "hhh.html", excludeChunks: ["index"], //不允许注入index.js文件 }), ], };- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
打包后：
7、HTML加入字体图标
在项目中必不可少的都要使用字体图标，对于字体图标，我们也要配置相对应的loader，不然无法打包字体图标。
我们在项目中添加字体图标：
css里放置，字体图标的样式，fonts放置字体图标文件
iconfont.css要改变一下引入路径：
如需打包，不能在index,html页面进行引入，需要在index,js文件中引入。
我们不配置对于loader进行打包，看看效果：
没有打包字体图标解决：
{ test:/\.(ttf|woff|woff2)$/, use:'file-loader?name=./fonts/[name].[ext]'//打包到指定文件夹，name为统一iconfont,ext为每个文件自己的后缀名 }- 1
- 2
- 3
- 4
全代码：
var path = require("path"); var HtmlWebpackPlugin = require("html-webpack-plugin"); module.exports = { entry: { index: "./src/index.js", jquery: "./src/jquery.js", hhh: "./src/hhh.js", }, output: { path: path.resolve(__dirname, "dist"), }, module: { rules: [ { test: /\.css$/, use: ["style-loader", "css-loader"], }, { test: /\.(png|jpg|jpeg|gif)$/, use: [ { loader: "file-loader", options: { esModule: false, outputPath: "img/", //让图片打包到img目录下，不配置该项默认是将图片和其他文件打包到同级 }, }, ], }, { test: /\.html$/, use: "html-withimg-loader", }, { test:/\.(ttf|woff|woff2)$/, use:'file-loader?name=./fonts/[name].[ext]'//打包到指定文件夹，name为统一iconfont,ext为每个文件自己的后缀名 } ], }, plugins: [ new HtmlWebpackPlugin({ // 指定模板页面 template: "./src/index.html", // 改变默认输出文件名称 filename: "index.html", excludeChunks: ["hhh"], //不允许注入hhh.js文件 }), new HtmlWebpackPlugin({ // 指定模板页面 template: "./src/hhh.html", // 改变默认输出文件名称 filename: "hhh.html", excludeChunks: ["index"], //不允许注入index.js文件 }), ], };- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
打包后：
8、单独分离css压缩打包
在之前我们的css都是更js打包在一起，但是我们想要它单独分离出来并进行压缩打包该怎么做呢？
8.1单独抽离css
1.下载插件：
mini-css-extract-plugin
2.引入插件var MiniCssExtractPlugin = require("mini-css-extract-plugin");- 1
3.修改loader
{ test: /\.css$/, use: [MiniCssExtractPlugin.loader, "css-loader"], },- 1
- 2
- 3
- 4
4.使用插件：
plugins:[ // 分离css new MiniCssExtractPlugin(), ]- 1
- 2
- 3
- 4
8.2压缩css文件
1.下载插件：
optimize-css-assets-webpack-plugin
2.引入插件：var OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin");- 1
3、使用插件：
plugins:[ // 压缩css new OptimizeCssAssetsWebpackPlugin() ]- 1
- 2
- 3
- 4
打包后：多出一个index.css文件
-
相关阅读:
笔记本电脑主板电池没电如何解决
Tomcat 开启远程调试
Windows 小工具之 Wifi 固定器
「短视频+社交电商」营销模式爆发式发展，带来的好处有什么？
常规加密算法是什么？原理是怎么样？有哪些？
【每日一题】—— B. Arrays Sum （Grakn Forces 2020）
Java架构师缓存通用设计方案
线程池拒绝策略最佳实践
适配器模式：接口的平滑过渡
Spring【 Spring整合MyBatis、SpringAOP（AOP简介 、AOP相关术语、AOP入门）】(五)-全面详解（学习总结---从入门到深化）
- 原文地址：https://blog.csdn.net/Zhang_wang_yun/article/details/133958735
