- 7 webpack
7 webpack
7.1 认识webpack
- webpack是一个现代的JavaScript应用的静态模块打包工具。
- webpack主要是模块 和 打包
- 模块化:
- 打包:对前端开发中的ES6,sass,less,模块间的依赖都需要第三方工具进行打包成浏览器可以识别的代码才能进行项目的部署,其他的构建化工具还有:gulp/grunt/webpack/
7.1.1 webpack模块化
- webpack模块化概念
- 前端模块化中提到了目前前端模块化规范:AMD、CMD、CommonJS、ES6。
- AMD、CMD、CommonJS都需要依赖node环境才能使用,在webpack中就可以 直接使用了,webpack是依赖于node环境的
- ES6可以直接在浏览器中使用
- 在ES6之前,我们要想进行模块化开发,就必须借助于其他的工具,让我们可以进行模块化开发
- 并且在通过模块化开发完成了项目后,还需要处理模块间的各种依赖,并且将其进行整合打包。
- webpack其中一个核心就是让我们可能进行模块化开发,并且会帮助我们处理模块间的依赖关系。
- 而且不仅仅是JavaScript文件,我们的CSS、图片、json文件等等在webpack中都可以被当做模块来使用
- 前端模块化中提到了目前前端模块化规范:AMD、CMD、CommonJS、ES6。
- webpack核心1:进行模块化开发,帮助我们处理模块间的依赖关系
7.1.2 webpack打包
webpack核心2:打包
将webpack中的各种资源模块进行打包合并成一个或多个包(Bundle)。
并且在打包的过程中,还可以对资源进行处理,比如压缩图片,将scss转成css,将ES6语法转成ES5语法,将TypeScript转成JavaScript等等操作。
7.1.3 webpack和gulp/grunt的比较
grunt/gulp的核心是Task
我们可以配置一系列的task,并且定义task要处理的事务(例如ES6、ts转化,图片压缩,scss转成css)
之后让grunt/gulp来依次执行这些task,而且让整个流程自动化。
所以grunt/gulp也被称为前端自动化任务管理工具
使用场景:
如果你的工程模块依赖非常简单,甚至是没有用到模块化的概念。
只需要进行简单的合并、压缩,就使用grunt/gulp即可。
但是如果整个项目使用了模块化管理,而且相互依赖非常强,我们就可以使用更加强大的webpack了
不同
grunt/gulp更加强调的是前端流程的自动化,模块化不是它的核心。
webpack更加强调模块化开发管理,而文件压缩合并、预处理等功能,是他附带的功能。
7.2 webpack的安装
webpack安装流程
安装nodejs环境
node -v
(webpack依赖于node环境)全局安装webpack
npm install webpack@3.6.0 -g
,查看版本’webpack -v’局部安装:安装指定动作目录的,会保存在package.json文件
–save-dev`是开发时依赖,项目打包后不需要继续使用的。
1
2cd 对应目录
npm install webpack@3.6.0 --save-dev
webpack全局安装和局部安装使用区分
- 在终端直接执行webpack命令,使用的全局安装的webpack
- 当在package.json中定义了scripts时,其中包含了webpack命令,那么使用的是局部webpack
webpack中所有的模块化开发规范都可以使用
7.3 webpack的起步
准备工作:
- 创建文件和文件夹解析
- dist文件夹:用于存放 之后打包的文件(在部署服务器端的时候使用)
- src文件:用于存放源文件
- index.html:浏览器打开展示的首页html
- package.json:
npm init -y
生成package.json文件
- 创建文件和文件夹解析
webpack代码的执行步骤
- 准备工作的进行
- 在src文件夹中创建入口文件main.js
- src同文件目录下创建index.html文件
- 在src中创建js文件,可以通过模块化开发导入到main.js中引入,代码执行之后在当前文件夹下通过webpack命令打包生成dist中的打包boudle.js文件(每次修改完之后都到执行webpack命令重新打包)
1
webpack ./src/main.js ./dist/bound.js
将打包之后的文件引入到index.html文件中
1
<script src="./dist/bound.js"></script>
注意:webpack中可以所有的模块化开发规范进行开发(commonjs,ES6等)
代码
1 | main.js |
1 | info.js |
1 | function add(num1, num2) { |
7.4 webpack的配置
创建过程:
- webpack的基本使用中,打包webpack需要手动输入打包的源文件和目标文件,通过配置webpack.config.js文件,进行打包时直接输入webpack即可
- 文件根目录下新建webpack.config.js文件(文件名称是固定)
- 通过
npm init -y
生成node的管理报package.json来存储依赖 - 开发过程中尽量安装局部webpack
npm install webpack@3.6.0 --save-dev
创建之后的目录
webpack.config.js配置
此时可以直接在终端输入webpack进行自动化构建
1 | // 导入node内置模块,path,获取当前文件的绝对路径 |
运行方式1:通过node_modules/.bin/webpack启动webpack打包
当用webpack的同时打包多个文件时,可以在package.json中设置命令别称
- “scripts”表示命令别名,如果命令太长可以通过别名的方式执行该行语句:npm run test(别名名称)
- 在终端执行:
npm run 别名名称即可
小结:配置完webpack之后,启动的方式有三种
- 方式1:
webpack
- 方式2:
node_modules/.bin/webpack
启动webpack打包 - 方式3:别名
npm run 别名名称
- 方式1:
7.5 loaders的使用(加载文件)
- webpack中,不仅仅是JavaScript文件,我们的CSS、图片、json文件等等在webpack中都可以被当做模块来使用,因此是使用过程在中都可以直接通过CommonJS来进行模块化开发
- 主要是用webpack来处理我们写的js代码,并且webpack会自动处理js之间相关的依赖。
- 问题:
- 加载css、图片,也包括一些高级的将ES6转成ES5代码,将TypeScript转成ES5代码,将scss、less转成css,将.jsx、.vue文件转成js文件
- webpack中不支持这种转化
- 解决方案:给webpack扩展对应的loader,loader相当于gulp中的task
- loaders使用过程:
- 通过npm安装需要使用的loader
- 在webpack.config.js中的modules关键字下进行配置
webpack中css的配置
css文件处理准备工作
- 在src目录中,创建一个css文件,其中创建一个normal.css文件。
- 重新组织文件的目录结构,将零散的js文件放在一个js文件夹中。
在入口文件main.js中引用文件
下载css文件处理的loader,按照官方配置webpack.config.js文件
- 注意style-loader和css-loader写在同一个数组中要将style写在后面,
- 因为webpack在读取使用的loader的过程中,是按照从右向左的顺序读取的。
- ``use[“style-loader”, “css-loader”]`
- test:后面是正则表达式
1 | npm install style-loader --save-dev |
webpack中less文件的处理
- 安装对应的loaders,这里要注意版本的问题装4.1版本
1 | npm install --save-dev less-loader less |
图片文件处理-url-loader/file-loader
- 图片处理,我们使用url-loader来处理,依然先安装url-loader
1 | npm install --save-dev url-loader |
1 | { |
limit属性的作用,
- 当图片小于limit时,对图片进行base64编码,返回的是一个编码不需要单独的文件存储,图片大小的限制,加载额图片在这个限制之内
当图片大于limit,会通过file-loader进行处理,这里下载file-loader,这里返回的是一个文件需要单独存储
- 再次打包,就会发现dist文件夹下多了一个图片文件,这里需要修改路径来引用生成文件,webpack.config.js文件下的output下设置url路径,文件在加载的时候回自动拼接这个路径
1
npm install --save-dev file-loader
1
2
3
4
5
6
7
8
9
10
11
12module配置
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
// 设置图片保存的位置
name: 'img/[name].[hash:8].[ext]'
}
]
}- 发现url-loader和file-loader同时存在file-loader不显示,去掉url-loader即可解决
- file-loader加载之后会生成新的图片在dist中,可以对图片位置的设置,我们可以在options中添加上如下选项:
- img:文件要打包到的文件夹
- name:获取图片原来的名字,放在该位置
- hash:8:为了防止图片名称冲突,依然使用hash,但是我们只保留8位
- ext:使用图片原来的扩展名
1
name: 'img/[name].[hash:8].[ext]' [name]图片原先的名字,[hash:8]取8为哈希值,[.ext]动态获取后缀名称
在加载图片时会重新加载图片处理模块
ES6语法处理->ES5
- webpack打包的js文件,发现写的ES6语法并没有转成ES5,那么就意味着可能一些对ES6还不支持的浏览器没有办法很好的运行我们的代码。
- 将ES6的语法转成ES5,那么就需要使用babel,在webpack中,我们直接使用babel对应的loader就可以了。
1 | npm install --save-dev babel-loader@7 babel-core babel-preset-es2015 |
1 | module配置 |
重新打包,查看bundle.js文件,发现其中的内容变成了ES5的语法
小结
完整代码:webpack.config.js
1 | // 导入node内置模块,path,获取当前文件的绝对路径 |
7.6 webpack中配置Vue
- webpack环境中集成Vuejs
7.6.1 webpack中vue配置和使用
使用步骤:
- 在项目中使用Vuejs,那么必然需要对其有依赖,所以需要先进行安装,后续是在实际项目中也会使用vue的,所以并不是开发时依赖,安装时去掉-dev
1
npm install vue --save
- 导入
1
import Vue from 'vue'//这里通过ES6方式导入,也可以 通过commonjs的方式,文件默认查找是在node_modules中查找文件
- 后面就和以前的开发流程一样进行模块化开发(注意这里使用vue是通过npm的方式进行安装使用)
打包运行vue时会报错
-
- runtime-only:这个版本的vue只负责运行不负责编译,里面的模板template会报错(默认是这个版本的vue)
- runtime-compiler:这个版本的vue负责编译,需要在webpack.config.js中指定vue的版本
解决方案:在webpack.config.js文件中指定runtime-compile版本
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17module.exports = {
entry: './src/main.js',
output: {
//resove()用于路径的拼接
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
// 设置url路径
publicPath: "dist/",
},
module: {},
resolve: {
//alias:重命名
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
}-
7.6.2 el和template的区别
二者都是options中的属性
template属性:用来修改el绑定的模板的内容,他会直接替换掉里面的内容
el和template 的关系
- el用于指定Vue要管理的DOM,可以帮助解析其中的指令、事件监听等等
- Vue实例中同时指定了template,那么template模板的内容会替换掉挂载的对应el的模板
- 目的:这样做之后我们就不需要在以后的开发中再次操作index.html,只需要在template中写入对应的标签即可
- template模板部分进行抽离:分成三部分书写:template、script、style,结构变得非常清晰。写在.vue当中
.vue文件封装处理
解析.vue文件需要安装n安装vue-loader(文件加载)和vue-template-compiler(模板渲染)
1
npm install vue-loader vue-template-compiler --save-dev
- 注意:这里安装的是最新版本的vue-loader,版本15必须添加插件plugin才能运行,
- 方案2:安装^13.0.0版本
- 在package.json文件中修改安装版本
"vue-loader": "^13.0.0",
,cmd中输入npm install
安装
- 在package.json文件中修改安装版本
修改webpack.config.js的配置文件,这里还可以在resolve属性设置一下后缀名
1 | //vue-loader,module属性 |
- 使用过程中在.vue文件中,组件中根部添加的属性行name,必须在data属性中有声明
- vue文件中包括了模板和js代码以及样式的编写
1 | <template> |
7.7 plugin的使用
- plugin定义
- plugin是插件,通常是用于对某个现有的架构进行扩展。
- webpack中的插件,就是对webpack现有功能的各种扩展,比如打包优化,文件压缩等等。
- nloader和plugin区别
- loader主要用于转换某些类型的模块,它是一个转换器,用于加载文件
- plugin是插件,它是对webpack本身的扩展,是一个扩展器。
- plugin的使用过程:
- 通过npm安装需要使用的plugins(某些webpack已经内置的插件不需要安装)
- 在webpack.config.js中的plugins属性中配置插件,plugin这里是一个数组
添加版权插件
- 为打包的文件添加版权声明
- webpack.config.js配置
- 重新打包程序:查看bundle.js文件的头部,看到如下信息
打包html的plugin(HtmlWebpackPlugin)
作用:将index.html文件打包到dist文件夹中,这个时候就可以使用HtmlWebpackPlugin插件
- 自动生成一个index.html文件(可以指定模板来生成)
- 将打包的js文件,自动通过script标签插入到body中
使用
- 不是内置插件,需要下载,注意这里需要下载3.2.0版本的才不会报错
1
npm install html-webpack-plugin@3.2.0 --save-dev
- webpack中配置并引入
- index.html中删除script标签
js压缩的Plugin(发布时的配置)
对打包的js文件进行压缩使用一个第三方的插件uglifyjs-webpack-plugin,
- 并且版本号指定1.1.1,和CLI2保持一致,webpack版本是3.6.0
使用
- 下载:
1
npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
- webpack配置
1
2
3const uglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');
plugin属性
new uglifyjsWebpackPlugin(),- 使用后js文件就会被压缩,注意这个插件是在发布的时候使用的,在开发阶段不建议使用
7.8 搭建本地服务器(开发时的配置)
目的:修改了代码之后实现浏览器自动刷新(不需要在webpack打包,他会自动进行打包)
- webpack提供了一个可选的本地开发服务器,这个本地服务器基于node.js搭建,内部使用express框架,可以实现我们想要的让浏览器自动刷新显示我们修改后的结果,用本地服务器会自动打包webpack,
- vscode中live Server插件也可以实现自动刷新浏览器,这里必须进行webpack的打包
- 为本地前端开发,提供了一个临时搭建的后台服务
- 修改文件保存后,浏览器自动刷新显示
使用步骤
需要安装这个单独的模块,注意版本的安装
1
npm install --save-dev webpack-dev-server@2.9.3
配置devserver也是作为webpack中的一个选项,选项本身可以设置如下属性:
contentBase:为哪一个文件夹提供本地服务,默认是根文件夹,我们这里要填写./dist
port:端口号
inline:页面实时刷新
historyApiFallback:在SPA页面中,依赖HTML5的history模式
1
2
3
4
5
6
7
8
9
10
11
12
13//配置本地服务器webpack.config.js
devServer: {
// 选定服务器运行的文件夹
contentBase: './dist',
// 设置是否实时自动刷新
inline: true
}
//配置script运行服务器package.json
"dev": "webpack-dev-server --open"
--open表示自动打开页面
直接在cmd输入npm run dev即可
7.9 webpack配置抽离
webpack.config.js中存在开发配置和生产配置,比较繁琐,这里需要将这两中配置分别进行抽离
在项目根目录下新建build文件夹,文件夹找那个分别创建三个文件
- base.config.js:存放公共部分
- dev.config.js:开发配置
- prod.config.js:生成(发布)配置
创建完成之后需要在不同的开发环境中合并基础配置和新添加的配置,此时需要依赖第三方插件webpack-merge
- 下载
npm install webpack-merge --save-dev
开发时依赖 - dev.config.js和prod.config.js中导入插件和基础配置并合并
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15dev.config.js
// 需要下载第三方插件webpack-merge合并不同开发环境下的配置文件
const webpackMerge = require('webpack-merge');
// 导入基本配置
const baseConfig = require('./base.config');
module.exports = webpackMerge(baseConfig, {
//配置本地服务器,发布时配置
devServer: {
// 选定服务器运行的文件夹
contentBase: './dist',
// 设置是否实时自动刷新
inline: true
}
}
),另外一个类似- 下载
合并之后需要在package.json文件中的script标签中运行命令中添加配置文件的路径(默认路径是根目录下的webpack.config.js),通过
--config 路径名称的方式
1 | "scripts": { |
- 然后直接在cmd中运行命令npm run 别名即可,此时可以删除wenpack.config.js文件了
本文链接: https://sparkparis.github.io/2020/05/09/Vue%E7%AC%94%E8%AE%B04/
版权声明: 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处!