webpack
webpack 基本概念
- 为什么要学习webpack
- webpack 它是
vue-cli
的底层实现原理,学习了它,可以更加方便的去使用vue-cli
(现在基本不用了)
- webpack 它是
- webpack 的作用
- vue-cli 搭建的项目有哪些功能:
- 可以运行为一个服务器
- 可以进行实时更新
- 代码修改之后,保存,页面会自动更新
- 可以解析 css 文件
import 'xx.css'
- 可以解析 .vue 文件
- …
- 上述的这些功能,其实都是
webpack
来实现的
- webpack 怎么用
- 配置文件
- 功能集合
- 配置项
- 可配置的信息
- loader
- 打包的第三方包
- plugin
- 扩展功能
- 配置文件
webpack 的使用
问题:
- 表现 & 原因:模块化之后的代码浏览器是无法执行的
解决方案:
- 如果希望模块化后的 js 代码可以被浏览器执行,可以使用 webpack 将模块化后的代码进行打包,再将打包好的代码交给浏览器将浏览器去执行就可以了。
作用:用来打包资源
- 表
- 样式
- 脚本
- 图片
打包流程
- 模块化的项目,以一个
js
文件为入口,分别导入其它的文件(.js
,图片
,样式
…)形成了一个模块化的项目。webpack
可以将这个模块化的模块进行打包,将js & 样式 &
图片进行打包,打包之后可以直接运行在浏览器上。
webpack的使用—步骤
- 初始化项目(生成
package.json
文件)
npm init -y
- 安装webpack
注意:新版本的webpack
不支持IE8
npm install --save-dev webpack@4.44.2 // 安装 webpack
npm install --save-dev webpack-cli@3.3.12 // 安装 webpack 的 cli
- 配置 package.json
{
"scripts": {
"start": "webpack ./要打包的文件名"
}
}
- 打包
npm run start
-
修改导入路径
将 index.html 中导入的 js 替换为 dist 目录中的 js
- 注意点
- 0.0 webpack 可以打包模块化的项目
- 1.0 一旦运行
npm run start
会将src
目录下所有的内容打包到dist
目录中 - 2.0 在
index.html
中不再导入src
目录下的文件,而是导入dist
目录下的内容 - 3.0
src
下的文件依旧是模块化的项目,dist
下的是通过webpack
打包之后的结构,不再是模块化的结构了(浏览器可以直接运行。) - 4.0 问题:
- 下载第三方包时不成功:
- 将下载的工具从
npm
改为cnpm
- 下载直接报错:
- 不要将文件夹的名称取名为:
webpack
- 修改
src
的内容之后,需要重新打包才能起作用
- 不要将文件夹的名称取名为:
- 下载直接报错:
webpack的使用—npm run
npm run start
:会去当前运行的目录下找到package.json
中的script
下的start
指令并且执行
webpack的使用—使用配置文件
- 由于将来在项目中可以修改的参数(配置项)非常多,如果分散在不同的地方,要修改就太麻烦了。为了解决这样的问题,可以使用 webpack 中的配置文件来管理这些需要修改的参数
- 在项目的根目录下创建一个文件名为:
webpack.config.js
- 在配置文件中添加代码
const path = require('path');
module.exports = {
entry: './src/main.js',
};
- 配置
package.json
文件
{
"scripts": {
"start": "webpack --config webpack.config.js"
}
}
- 删除
dist
目录 - 重新打包
npm run start
注意点:
- npm run start:
npm run
要运行package.json
中scripts
下面的指令start
:找到package.json
中的scripts
下面的 start 对应的指令,并且执行
- webpack --config webpack.config.js
配置项
配置文件 - 入口
- 设置项目的入口文件
*
配置文件 - 出口
- 设置项目打包后生成的文件名
配置文件 - 项目的模式
-
项目模式的区分:
-
开发模式(development):
-
概念:程序员在这个过程中进行代码的开发
-
特点:
-
保证代码的完整性,以方便程序进行代码的修改
-
-
生产模式(production ):
-
概念:程序员的代码已经开发完成,项目已经发布上线了,已经投入生产使用
-
特点:
-
代码运行稳定,代码体积尽可能的小(删除空格换行缩进)
-
-
mode:(项目的模式)
-
- development:开发模式
- production:生产模式(默认值)
配置文件 - 解析
-
resolve:
alias
: 别名
@
:表示的是src
目录 ,它就是用alias
来配置的
-
extensions:可省略的后缀名
- 在导入文件时,每个文件都有自己的后缀,可通过它来配置可省略的后缀默认情况下
js 后缀
可以省略(除了 js 之外其它的都不能省略)
- 在导入文件时,每个文件都有自己的后缀,可通过它来配置可省略的后缀默认情况下
配置文件 - 源码映射
- 打包后的项目报错信息是不准确的,可以使用源码映射来解决这个问题
开启源码映射:
特点:
- 1.0 一旦项目开启源代码映射,会将原本的代码原本信息也保存一份到打包的目录下。
- 问题:在加载资源时,
main.js
太大了,有一部分没有意义,会消耗性能。 - 解决方案:
- 将源码生成到别的文件中:
devtool: 'source-map'
- 将源码生成到别的文件中:
- 问题:在加载资源时,
注意点:
- 项目的配置文件其实是基于
nodejs
的 - 我们说 webpack是基于 nodejs 的
总结:
- webpack 中的配置项其实有很多: 传送门
- 我们只是挑选了其中用的比较多的来进行讲解,如果后续我们遇到其它的配置可以通过传送门去查看
loader
webpack 默认仅仅只能打包 js 文件,无法打包 其它文件(图片,样式,字体 …).如果想要打包其它的文件,可以借助 webpack 中的
loader
来进行打包。
loader - 作用
作用:
- webpack 默认只能打包 js 文件,无法打包其它文件(样式,字体,图片)。如果想要打包其它的文件,可以借助 webpack 中的 loader 来进行打包。
特点:
- 所有的
loader
都是第三方包,可以帮助 webpack 打包其它资源 - 不同的 loader 打包的文件是不一样的
loader - style-loader&css-loader
- 可以用来帮助 webpack 打包
.css
文件
传送门
- 安装打包
css
的loader
npm install --save-dev style-loader css-loader
- 配置
Loader (webpack.config.js)
entry: '',
output: {},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader', // 将样式使用到页面中
'css-loader' // 将样式打包到 dist 目录下
]
}
]
}
}
- 重新打包
npm run start
注意点:
- 1.0 大部分的
loader
在使用时步骤都是三步:- a. 下载 loader
- b.配置 loader
- c.重新打包
- 2.0 打包样式时用到了
style-loader & css-loader:
css-loader:
将 css 中的样式打包到了 dist 目录下的文件中了style-loader:
将打包后的css
文件在运行时,添加到页面的头部中以style
标签进行包裹
- 3.0
style-loader
与css-loader
的书写顺序不能改变
loader - less-loader
- 在写项目时,一般会使用 less 语法来书写样式。less 如果需要打包要借助第三方包:
less-loader
- 使用 less
- 在 style 中创建一个 less.less
- 添加 less 的样式
- 在 src/index.js 中导入这个 less
打包 less 的步骤:
- 1.0 安装第三方包
npm install --save-dev less-loader less
- 2.0 配置
loader
(webpack.config.js
中完成的)
module.export = {
module: {
rules: [{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
}]
}
}
3.0 重新打包
loader - sass-loader
用来打包 sass
文件的
使用 sass
文件:
-
创建一个
sass
文件(注意点:所有的sass
文件为了防止跟其它文件冲突,后缀名统一写为.scss
) -
完成
sass
的代码 -
在
index.js
中使用
打包 sass 的步骤:- 1.0 下载第三方包
- 2.0 配置第三方包
- 3.0 重新打包
loader - file-loader
可以用来打包图片 & 字体
打包图片:
- 使用图片
- 在 html 中添加一个容器
- 给容器设置样式:设置一个背景图片
- 打包图片:
- 1.0 下载第三方包
- 2.0 配置第三方包
- 3.0 重新打包
- 注意点:
- 1.0 会将图片打包到 dist 目录下
- 2.0 将静态文件:public/index.html 拷贝到 dist 目录下
- 导入 的js文件的路径也要做相应的修改
打包字体:
- 使用字体(使用 bootstrap 中的字体文件)
- 下载 bootstrap (版本号:3.3.7)
- 导入 bootstrap 的样式
- 使用字体图标
- 打包字体:
- 1.0 下载第三方包
- 2.0 配置第三方包
- 3.0 重新打包
loader - babel-loader
- 将 es6 语法打包为 es5 语法
- 下载第三方包
npm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env --save-dev
- 配置第三方包
module: {
rules: [
{
test: /\.js$/, // 将后缀名为 js 的文件进行 es6 转 es5 的处理
exclude: /node_modules/, // 处理的目录不包括 node_modules
use: {
loader: 'babel-loader', // 使用 babel-loader 来处理
options: {
presets: ['@babel/preset-env'] // 固定写法
}
}
}
]
}
-
重新打包
- 最新的 webpack 已经放弃了 ie 浏览器(不会再将 es6 转 es5,所以如果要上述的代码起作用,应该将 webpack 的版本降级为 4.x)
loader - vue-loader
默认情况下 webpack 无法打包后缀名为 .vue 的文件、如果要打包需要借助第三方包: vue-loader
使用 .vue 文件:
- 1.0 下载第三方包: vue
- 2.0 创建一个 App.vue 文件
- 3.0 完成 App.vue 文件的内容
- template & style & script
- 4.0 在 main.js 中
- 导入 Vue
- 导入 App.vue
- 创建一个 vue 实例
- 将 App.vue 挂载到 vue 实例中
- 打包 .vue 的过程:
- 安装第三方包
npm install -D vue-loader vue-template-compiler
- 配置 Loader (webpack.config.js)
// 导入 Loader
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
module: {
rules: [
// 配置 loader
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
// 将 vue-loader 作为插件来使用
new VueLoaderPlugin()
]
}
- 重新打包 npm run start
注意点:
vue-loader
的说明文档不在 webpack 中,因为vue-loader
是属于 vue 的全家桶系列。如果要找去 vue 的官网中去找
总结:
loader
与配置项一样,也有很多不同的loader
, 我们只是学习了一些常用的loader
,其它的可以参考 传送门webpack:
- 配置项:可以用来配置项目的相关信息
loader
:可以用帮助webpack
打包额外的资源
插件
给 webpack 提供额外的功能
插件 - HtmlWebpackPlugin
修改内容之后,重新打包好 dist 目录下的内容之后,还需要将 index.html 从pulibc下拷贝到 dist 目录下,太麻烦了。
问题:我不希望每次重新打包 dist 目录之后再将 index.html 拷贝到 dist 目录下。
解决方案:可以使用 HtmlWebpackPlugin
作用:可以在 dist 目录中自动生成一个 html 文件
- 使用步骤:
- 下载插件
npm install --save-dev html-webpack-plugin
- 配置插件(webpack.config.js 中完成的)
// 导入插件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 配置插件
module.exports = {
plugins: [
new HtmlWebpackPlugin({
filename: '', // 生成的静态文件名称
template: '' // 以谁为模板生成的静态页面
})
]
}
- 重新打包: npm run start
注意点:
- 自动生成的 html 文件有以下特点:
- 会自动将模板中的内容全部复制一份
- 会自动在文件的末尾添加入口文件的引用
<script src="main.js"></script>
插件 - clean-webpack-plugin
每次重新打包项目时一定要删除 dist
目录
问题:每次都删除,太麻烦了。解决这个问题可以使用:clean-webpack-plugin
作用:用来清除 dist 目录
步骤:
- 下载插件
npm install clean-webpack-plugin --save-dev
- 配置插件
// 导入插件
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
// 配置插件
module.exports = {
plugins: [
new CleanWebpackPlugin()
]
}
- 重新打包
注意点:
- 1.0 插件会帮助自动清除 dist 目录
- 2.0 以后如果有能力看文档时,尽量用英文文档
插件 - webpack-dev-server
可以开启一个服务器,具有实时更新的功能
作用:可以开启一个服务器,具有实时更新的功能
- 下载插件
npm install --save-dev webpack-dev-server
- 配置插件(webpack.config.js)
module.exports = {
devServer: {
contentBase: './dist'
},
}
- 配置指令:(package.json)
{
"scripts": {
"start": "webpack --config webpack.config.js",
"serve": "webpack-dev-server --open"
}
}
- 开启服务器:npm run serve
注意点:
- 开启服务器之后,修改完代码之后是不需要自己重新打包, 手动刷新页面的(服务器可以做到时实更新)
- webpack-dev-server插件在使用时,默认使用的默认文件的名称为: webpack.config.js
插件 - 模块的热替换
- 修改 css 之后,可以让页面不 刷新直接更新修改的样式
module.exports = {
devServer: {
contentBase: './dist',
hot: true, // 开启模块的热替换
}}
注意点:
- 配置文件中的配置项发生修改之后需要重启服务才能生效
总结:
- 插件的作用是给 webpack 提供额外的功能
- 插件的种类不单单只有以上几种还有很多,详情请见: 传送门
- webpack
- 配置项:配置项目中的相关信息
- loader:配置打包信息
- plugin:配置额外功能
打包
说明:在项目中的 package.json
中有两个指令:
"serve": "vue-cli-service serve": 将项目的服务器启动起来
"build": "vue-cli-service build":将项目进行打包
- 运行指令: npm run build
- 得到生成的 dist 目录:
- 这个目录就是我们需要的上线的文件