1.webpack基本介绍
webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)
现代 javascript 应用程序的 静态模块打包器 (module bundler)
- 静态: 文件资源
- 模块: node环境, 引入文件, 遵守模块化语法
除了合并代码, 还可以翻译和压缩代码
- less/sass -> css
- ES6/7/8 -> ES5
- html/css/js -> 压缩合并
2.学习webpack的准备工作
准备
环境准备:它是基于nodejs,所以本机一定要先安装了node。
项目准备:webpack是用来对已有项目进行打包,所以一定是在某个项目下进行应用打包。
知识准备:模块化(es6, commonjs模块化均可)
操作顺序
1.安装node
2.用npm init 初始化项目(如果已经有package.json,则跳过这一步)
3.在当前项目中安装并使用webpack
示例项目
目标:在一个已存在的项目中,一个html文件中引入了两个js文件,完成某个功能。现在是的任务是把这两个js打包成一个js文件。
操作步骤如下:
初始化项目
任意新建一个空文件夹,取名为webpack-demo,进入到文件夹内部,用 npm init -y 命令来生成一个package.json
准备初始代码
创建三个文件index.html,index.js,tool.js,最后的项目结构是:
index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<div id="app">
</div>
<!-- 引入两个js文件 -->
<script src="./tool.js"></script>
<script src="./index.js"></script>
</body>
</html>
tool.js
const updateDom = (id, content) =>{
window.document.getElementById(id).innerHTML = content
}
index.js
updateDom ('app','index.html')
说明:
- 在一个html中引入多个js文件,并且要注意它们的顺序关系。
- script代码在body的底部,这样可以确保是dom节点渲染在js代码执行之前。
因为在index.js要用到tool.js的功能,所以还在index.html中同时引用了index.js和tool.js,并把tool.js的引用放在index.js的引用之前。如下整个代码的示意图:
上面的代码中有如下问题:
- js文件之间有先后的引用的关系:由于index.js中引用了tool.js的,所以必须要把tool.js放在index.js的前面。
- 存在变量污染的情况:一个文件中定义的变量,在另一个文件中可能会被修改,覆盖。
- 随着.js文件个数增加,则项目会越来越不好管理。
解决思路:模块化 + webpack打包
3.安装并使用webpack
安装webpack
webpack是一个工具,对于所有的项目都可以来使用,从这个意义上来讲,它是可以去全局安装的,但是,考虑到不同的项目中可能使用了不同的webpack版本,所以不推荐大家去全局安装。特别是打开一个老项目时,一定要注意一下它的webpack的版本号。
注意点:前端很多悲惨故事,都是是从版本不一致开始的。采用局部安装的方式来安装它,注意,它只是一个开发依赖,并不是生产依赖,所以在命令行中加上-D。
命令如下:npm i webpack webpack-cli -D
下面来通过命令行工具来检查是否安装成功。
注意:
- 由于webpack并不是全局安装的,所以并不能直接使用webpack -v来做检验。
- npx是npm5.2之后提供的新功能。可以通过npx -v来检测它的版本。 在这里,我们通过它来调用项目安装的模块,它在运行时会在node_modules/.bin中去检查命令是否存在。
- webpack作为一个独立的工具,它与具体的项目无关。在你的项目中,通过开发依赖安装它
修改用模块化的方式来改写代码
以模块化的方式来修改:
- 在tool.js中导出模块
- 在index.js中使用模块
在tool.js导出模块
它用来提供一个方法,供其它模块来使用。这里使用commonjs规范(就是node.js中的导出模块的方式)导出工具方法。
const updateDom = (id, content) => {
window.document.getElementById(id).innerHTML = content
}
module.exports={
updateDom
}
在index.js中导入模块
在index.js中引入tool.js中的定义的方法。注意,这里已经涉及到了在一个js中引用另一个js
const {updateDom}=require('./tool')
updateDom('app', 'index.html')
由于现在在index.js使用了require这种模块化的处理方式,所以它无法直接在浏览器中使用,如果直接在index.html中引用,浏览器会报错。
我们接下来就需要使用webpack命令来对index.js进行处理了。
使用webpack来做打包
命令格式是:npx webpack 文件名
这里的操作是:
如果没有遇到错误,会看到类似的结果如下:
它说明打包操作已经成功:index.js和tool.js已经合成了一个main.js文件了。
webpack会分析入口文件中的引用关系,把相关的文件合成在一起,变成一个.js文件
示意如下:
引入打包后的js
把上面打包完成的main.js引入到index.html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<body>
<div id="app">
</div>
<!-- 引入打包后的.js文件 -->
<script src="./dist/main.js"></script>
</body>
</html>
示意图如下:
运行index.html,浏览器页面显示
小结
1.为啥要用webpack?
- 有效处理模块化。默认情况下,浏览器并不支持模块化,而我们的前端项目又使用了模块化,有了webpack之后,就可以突破这个限制了。
- webpack可以把多个相互引用的.js文件打包成一个文件,且文件有加密,压缩的效果,上线更安全。
2.这个过程中nodejs起了什么作用?
- 它是webpack的运行基础,没有了nodejs环境,就无法做类似于文件读写的操作了。
- 最终生成的main.js并不是在nodejs环境中运行的,整个的项目效果还是在浏览器中运行的。
4.认识webpack的配置文件
了解配置文件
工具运行的默认参数配置会放置在某个具体的文件。
例如:迅雷/百度网盘下载的文件保存在哪里?
配置文件的作用
是否特殊指定使用哪个配置文件, 如果是的话,采用配置文件的配置来做打包,否则就去项目根目录找是否有一个webpack.config.js的文件,如果找到,直接按照这个配置来打包,否则使用内置的默认配置打包
创建并使用默认配置文件
在项目根目录下创建一个名为webpack.config.js。其内容如下:
module.exports={
mode: 'development',//打包方式
}
这个文件的意义是导出一个配置项:用来对webpack的打包行为做设置。在操作层面,就是学习如何去使用这个文件。
然后,再次运行打包命令,查看产生的main.js文件的内容,对比与之前的变化。
5.设置入口和出口
在配置文件中,配置自定义的入口和出口
入口和出口
入口文件: 指定了webpack从哪个文件开始工作。在它的内部会引入其他的模块,这样在打包时就会「顺藤摸瓜」也将其他的文件打包进来。
出口文件:指定了最后打包之后的文件,重点是这个文件的具体位置。
在webpack中,默认的入口和出口分别是:
- 默认入口是:./src/index.js
- 默认出口是:./dist/main.js
也就是说,如果直接在根目录下运行webpack,它会直接去找.src下的index.js,并把打包之后的代码放在dist/main.js下。
了解默认入口文件
修改目录结构,新建一个src目录,并把index.js,tool.js移动到它下面。
直接省略入口文件,直接打包: npx webpack 由于在src目录已经存在index.js
再来测试一下。
设置入口文件
需求:如果在实际开发中,希望:
- 这个入口文件不是index.js,而是main.js
- 整体js文件不是放在src目录下,而是src/js下
解决:
(1) 调整目录结构如下:
(2) 然后,修改配置项
1.修改src/index.js的名字为src/js/main.js
2.在webpack.config.js的配置项中添加 entry项
module.exports = {
mode: 'development', //打包方式
entry: './src/js/main.js' //入口文件
}
3.重新打包,测试。
指定出口文件
在webpack.config.js中设置output项。
目标: 把出口文件设置为在build目录下的bundle.js
//引入nodejs中的核心模块
const path = require('path')
module.exports = {
mode: 'development', //打包方式
entry: './src/js/main.js', //入口文件
output: {
path: path.join(__dirname, '/build'), // 决定出口文件在哪里
filename: 'bundle.js' // 设置出口文件的名字。默认情况下,它叫main.js
}
}
说明:
- output中的filename用来指定打包后的文件名字。
- output中的path用来指定打包后的路径。注意:它必须是绝对路径。所以,这里引用path模块中的join和__dirname来生成绝对路径。
- 如果path中的路径不存在,它会自动创建。
6.修改打包模式
webpack.config.js中的mode项用来设置打包的方式,如果不设置,会默认为production。
module.exports = {
mode:"development"
}
webpack给mode 提供了两个模式:
- evelopment :开发模式(代码不会压缩 混淆)
- production:生产模式(压缩,混淆,加密… 不可读)
7.在打包时指定配置文件
下面,自已创建一个webpack.dev.js的文件,用它来做配置文件。
在项目根目录下创建webpack.dev.js,内容如下:
//引入nodejs中的核心模块
const path = require('path')
module.exports = {
mode: 'development', //打包方式
entry: './src/js/main.js', //入口文件
output: {
path: path.join(__dirname, '/dev'), // 决定出口文件在哪里
filename: 'dev.js' // 设置出口文件的名字。默认情况下,它叫main.js
}
}
下面,希望使用这个配置文件中的设置来打包。
它的格式是:
npx webpack --config webpack的配置文件
运行命令:
npx webpack --config webpack.dev.js
8.简化打包命令
背景
当涉及多个打包配置要指定时,打包命令比比较复杂,难以记忆。
定制script
可以在package.json中添加script命令来快速启动webpack,格式如下:
“scripts”: {
“自定义命令名”: “要具体执行的代码”,
}
示例
"scripts": {
"dev": "webpack --config webpack.dev.js",
"build": "webpack",
"test": "echo "Error: no test specified" && exit 1"
}
注意:在script中不再需要添加npx。它会自动在node_modules/.bin中去找命令。
这样 ,我们就得到了两个可以执行的命令: dev, build 。
可以在根目录下的小黑窗中通过:
npm run build, npm run dev 来运行
9.webpack基础使用阶段小结
- webpack的配置文件默认名是webpack.config.js,也可以单独指定
- 学习webpack就学习webpack.config.js的使用。
- 把webpack的命令集成到script中可以简化打包命令。
- 可以自行定义入口和出口文件
10.loader整体介绍
在webpack看来 一切皆模块,图片,样式文件,js文件… 。 但是webpack默认只能处理js模块,对于非js的内容,例如css, less文件,图片文件等等 它就需要一些帮手来处理了。这些帮手就是loader。
webpack 可以使用 loader 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源。你可以使用 Node.js 来很简单地编写自己的 loader。
11.loader处理css文件
如何引入css文件呢?
传统开发中:css样式是通过在.html文件中通过link标签引入的。但是,现代开发中,我们会把css文件看做资源,直接在.js文件中导入。
下面,我们来具体讨论如何处理.css文件。
创建.css文件
src/css/public.css的内容如下
body,html{
padding:0;
font-size:14px;
}
src/css/style.css的内容如下
@import "public.css";
div {
border:4px solid #ccc;
width: 50%;
height: 200px;
margin:30px auto;
box-shadow: 3px 3px 3px #ccc;
background-color: #fff;
text-align: center;
}
说明:css的@import语句用来导入另一个css文件。
在main.js中导入css
const {updateDom}=require('./tool')
import "../css/style.css"
updateDom('app', 'index.html')
再次,以默认配置文件的打包方式npm run build打包代码,会报错,具体的保存信息如下:
上面报错的原因是:webpack把.css文件内容当作了js代码来运行,那当然会报错了。所以,解决方法是安装相应的loader来处理。
安装并使用css-loader
对于loader的使用,其基本步骤是一致的,分成两步:
1.安装npm包
2.配置webpack.config.js中的module
安装
安装包的命令是:npm i css-loader -D 。它也是开发依赖。
在配置文件使用
修改webpack.config.js文件,添加module
//引入nodejs中的核心模块
const path = require('path')
module.exports = {
mode: 'development', //打包方式
entry: './src/js/main.js', //入口文件
output: {
path: path.join(__dirname, '/build'), // 决定出口文件在哪里
filename: 'bundle.js' // 设置出口文件的名字。默认情况下,它叫main.js
},
module: { // 处理非js模块
rules: [ // 规则
{
test: /\.css$/, // 正则测试
use: ['css-loader'] // loader
}
]
}
}
再次打包
它不会报错。但是,页面上也并没有出现样式的效果。打包之后的文件中并没有包含css代码。
安装并使用style-loader
如果我们希望样式生效,最终在.html文件中有两种情况:
- 有style标签
- 有link标签
而css-loader只是能让你在.js中通过import来引入.css,如果你希望引入的css代码最终以style标签的方式插入到html页面中,则还需要安装一个loader:style-loader
安装
npm i style-loader -D
配置
//引入nodejs中的核心模块
const path = require('path')
module.exports = {
mode: 'development', //打包方式
entry: './src/js/main.js', //入口文件
output: {
path: path.join(__dirname, '/build'), // 决定出口文件在哪里
filename: 'bundle.js' // 设置出口文件的名字。默认情况下,它叫main.js
},
module: { // 处理非js模块
rules: [ // 规则
{
test: /\.css$/, // 正则测试
use: ['style-loader','css-loader'] // loader
}
]
}
}
Tip: 在有多个loader的情况下,use数组中的loader执行顺序是从右到左的过程。即:
- 先用css-loader来处理css
- 再用style-loader把css代码插入到html中的style标签中。
打包查看效果
现在就能看到css的效果了 。
12.loader处理less文件
如果希望处理less文件,则还需要去安装额外的包。
创建less文件
在src目录的less目录下创建 index.less,
则内容如下:
@import "../css/style.css";
body{
div {
color: red;
}
}
在.js中引用.less
在src/js/main.js文件中引入less
const {updateDom}=require('./tool')
// import "../css/style.css"
import "../less/index.less"
updateDom('app', 'index.html')
安装包
npm i less -D
npm i less-loader -D
配置模块
在rules中添加一个配置,专门针对less文件。
//引入nodejs中的核心模块
const path = require('path')
module.exports = {
mode: 'development', //打包方式
entry: './src/js/main.js', //入口文件
output: {
path: path.join(__dirname, '/build'), // 决定出口文件在哪里
filename: 'bundle.js' // 设置出口文件的名字。默认情况下,它叫main.js
},
module: { // 处理非js模块
rules: [ // 规则
{
test: /\.css$/, // 正则测试
use: ['style-loader', 'css-loader'] // loader
},
{
test: /\.less$/, // 正则测试
use: ['style-loader', 'css-loader', 'less-loader'] // loader
}
]
}
}
注意:如上配置中,对于less文件的处理涉及三个loader,其处理顺序是less-loader --> css-loader–>style-loader。
- less-loader:用来加载less文件,并处理成css
- css-loader:用来加载css文件
- style-loader:用来将css代码以style标签的格式插入到html文件中
然后可以看效果了
13.处理资源文件
目标:处理资源文件。假设在css中引入图片,要怎么处理呢?
在项目中引入图片
在src下新增目录,img,并在其下放置两张图片。注意:一张图片大一些,一张图片小一些(可以自行决定)。
- webpack.png: 49.4kb
- webpack.svg: 3kb
-
使用图片
两种方式使用图片:
- 作为css的背景图
- 作为独立的图片资源使用
在style.css中引入图片,作为div标签的background。
@import "public.css";
div {
border: 4px solid #ccc;
width: 50%;
height: 200px;
margin: 30px auto;
box-shadow: 3px 3px 3px #ccc;
background-color: #fff;
text-align: center;
background-image: url('../img/webpack.svg') //图片路径
}
在src/main.js中,通过代码 - 把⼤图插⼊到创建的img标签上, 添加body上显示
const {updateDom}=require('./tool')
// import "../css/style.css"
import "../less/index.less"
updateDom('app', 'index.html')
// 引⼊图⽚-使⽤
import imgUrl from '../img/webpack.png'
const theImg = document.createElement("img")
theImg.src = imgUrl
document.body.appendChild(theImg)
配置
webpack.config.js中的内容如下
//引入nodejs中的核心模块
const path = require('path')
module.exports = {
mode: 'development', //打包方式
entry: './src/js/main.js', //入口文件
output: {
path: path.join(__dirname, '/build'), // 决定出口文件在哪里
filename: 'bundle.js' // 设置出口文件的名字。默认情况下,它叫main.js
},
module: { // 处理非js模块
rules: [ // 规则
{
test: /\.css$/, // 正则测试
use: ['style-loader', 'css-loader'] // loader
},
{
test: /\.less$/, // 正则测试
use: ['style-loader', 'css-loader', 'less-loader'] // loader
},
{
test: /\.(png|jpg|gif|jpeg)$/i, // 匹配图⽚⽂件
type: 'asset' // 在导出⼀个 data URI 和⼀个单独的⽂件之间⾃动选择
}
]
}
}
打包后运行index.html效果如下
loader⼩结
1.⼀切皆模块,不同的模块有不同的loader
2.loader
- 第⼀步:安装包
- 第⼆步:配置rules
14.plugin整体说明
webpack中除了loader之外,还有⼀个核⼼概念:plugin,中⽂就是插件。它可以⽤来增强webpack的功能。plugin是⽤于扩展webpack的功能,各种各样的plugin⼏乎可以让webpack做任何与构建相关关的事情。plugin的配置很简单,plugins配置项接收⼀个数组,数组⾥的每⼀项都是⼀个要使⽤的plugin的实例,plugin需要的参数通过构造函数传⼊。使⽤plugin的难点在于plugin本身的配置项,⽽不是如何在webpack中引⼊plugin,⼏乎所有webpack⽆法直接实现的功能,都能找到开源的plugin去解决,我们要做的就是去找更据⾃⼰的需要找出相应的plugin。
html-webpack-plugin
功能:把我们⾃已写的.html⽂件复制到指定打包出⼝⽬录下,并引⼊相关的资源代码。为html⽂件中引⼊的外部资源如script、link动态添加每次compile后的hash,防⽌引⽤缓存的外部⽂件问题。可以⽣成创建html⼊⼝⽂件。
下载安装
命令:npm i html-webpack-plugin -D
配置
在webpack.config.js中,做两件事:
- 引⼊插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
- 添加⼀个plugins配置
//引入nodejs中的核心模块
const path = require('path')
//引入的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development', //打包方式
entry: './src/js/main.js', //入口文件
output: {
path: path.join(__dirname, '/build'), // 决定出口文件在哪里
filename: 'bundle.js' // 设置出口文件的名字。默认情况下,它叫main.js
},
module: { // 处理非js模块
rules: [ // 规则
{
test: /\.css$/, // 正则测试
use: ['style-loader', 'css-loader'] // loader
},
{
test: /\.less$/, // 正则测试
use: ['style-loader', 'css-loader', 'less-loader'] // loader
},
{
test: /\.(png|jpg|gif|jpeg)$/i, // 匹配图⽚⽂件
type: 'asset' // 在导出⼀个 data URI 和⼀个单独的⽂件之间⾃动选择
}
]
},
plugins: [
new HtmlWebpackPlugin({ // 打包输出HTML
minify: { // 压缩HTML⽂件
removeComments: true, // 移除HTML中的注释
collapseWhitespace: true, // 删除空⽩符与换⾏符
minifyCSS: true // 压缩内联css
},
filename: 'index.html',
template: path.resolve('./index.html') // 指定模块的位置
})
]
}
3.打包测试
- 它会把template中指定的.html⽂件复制(压缩)到出⼝⽂件夹
- 还会⾃动附上打包之后.css和 .js代码
##clean-webpack-plugin
在⽣成打包⽂件之前,把⽬录清空掉。
下载安装
npm i clean-webpack-plugin -D
配置
- 引⼊:
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
- 添加plugins
plugins:[
new CleanWebpackPlugin(),
]
webpack.config.js文件最终配置信息如下
//引入nodejs中的核心模块
const path = require('path')
//引入的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
mode: 'development', //打包方式
entry: './src/js/main.js', //入口文件
output: {
path: path.join(__dirname, '/build'), // 决定出口文件在哪里
filename: 'bundle.js' // 设置出口文件的名字。默认情况下,它叫main.js
},
module: { // 处理非js模块
rules: [ // 规则
{
test: /\.css$/, // 正则测试
use: ['style-loader', 'css-loader'] // loader
},
{
test: /\.less$/, // 正则测试
use: ['style-loader', 'css-loader', 'less-loader'] // loader
},
{
test: /\.(png|jpg|gif|jpeg)$/i, // 匹配图⽚⽂件
type: 'asset' // 在导出⼀个 data URI 和⼀个单独的⽂件之间⾃动选择
}
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({ // 打包输出HTML
minify: { // 压缩HTML⽂件
removeComments: true, // 移除HTML中的注释
collapseWhitespace: true, // 删除空⽩符与换⾏符
minifyCSS: true // 压缩内联css
},
filename: 'index.html',
template: path.resolve('./index.html') // 指定模块的位置
})
]
}
首先在build文件下创建一个test.txt文件
打包后运行,test.txt文件会自动清除
plugin⼩结
plugin⽤来增加webpack能⼒。
步骤:
- 下载安装
- 配置webpack.config.js
a. 引⼊
b. 添加plugins的设置
15.webpack实时打包
⽬标
实现实时打包预览效果。当我们修改了代码时,⽴即运⾏打包命令,并显示效果。
⼯具:[webpack-dev-server]
注意:
- 项⽬开发都是对src⽬录内部的⽂件进⾏更新,不要去修改dist打包好的⽂件
- 现在对src内部的任何⽂件做修改操作后,都需要重新打包,才可以看到对应效果
步骤
- 安装
npm i webpack-dev-server -D - 在webpack.config.js中做如下配置
module.exports = {
// 其他省略....
// 配置 webpack-dev-server的选项
devServer: {
host: '127.0.0.1', // 配置启动ip地址
port: 10088, // 配置端⼝
open: true // 配置是否⾃动打开浏览器
}
}
- 在package.json中补充⼀个script
"scripts": {
+ "aaa": "webpack-dev-server",
// 它默认会找webpack.config.js⽂件
},
注意点:如果是使用指定配置文件是 “aaa” :“webpack-dev-server --config webpack.dev.js” ; aaa是自己定义的名字
4. 启动命令
现在通过 npm run aaa 就可以实现 实时打包、实时编译、实时浏览器查看效果了。它会⾃动打
开⼀个浏览器窗⼝。
5. 测试
- 修改.js代码,
- 修改.css代码,检查是否会重启
注意:
浏览器看到的实时效果是服务器通过“ 内存 ”提供的,没有物理⽂件,也不会⽣成dist⽬录