webpack前端项目构建工具
1. 当前 Web开发面临的困境
- 文件依赖关系错综复杂
- 静态资源请求效率低
- 模块化支持不友好
- 浏览器对高级
Javascript
特性兼容程度较低- etc…
2.webpack
概述
webpack 是一个流行的前端项目构建工具(打包工具),可以解决当前 web 开发中所面临的困境。
webpack 提供了友好的模块化支持,以及代码压缩混淆、处理 js 兼容问题、性能优化等强大的功能,
从而让程序员把工作的重心放到具体的功能实现上,提高了开发效率和项目的可维护性。
目前绝大多数企业中的前端项目,都是基于 webpack 进行打包构建的。
3. webpack
的基本使用:
3.1 创建列表隔行变色项目
- 新建项目空白目录,并运行
npm init –y
命令,初始化包管理配置文件package.json
- 新建
src
源代码目录- 新建
src
->index.html
首页–index.js
文件- 初始化首页基本的结构
- 运行
npm install jquery –S
命令,安装jQuery
- 通过模块化的形式,实现列表隔行变色效果
index.html
先暂时引入:<script src="./index.js"></script>
<ul>
<li>这是第1个li</li>
<li>这是第2个li</li>
<li>这是第3个li</li>
<li>这是第4个li</li>
<li>这是第5个li</li>
<li>这是第6个li</li>
<li>这是第7个li</li>
<li>这是第8个li</li>
<li>这是第9个li</li>
</ul>
index.js
import $ from 'jquery'
$(function() {
$('li:odd').css('backgroundColor', 'pink')
$('li:even').css('backgroundColor', 'red')
})
编写上述代码后,打开
index.html
发现没有隔行变色的效果。因为有兼容性问题我们还需要安装webpack
,它会自动生成dist/main.jsmain.js
是经过webpack
转换之后输出得到的
3.2 在项目中安装和配置 webpack
运行
npm install webpack webpack-cli –D
命令,安装webpack
相关的包运行 npm install webpack webpack-cli –D 命令 有时会报错code ENOSELF 解决方法:找到package.json,修改里面的name属性值就可以了 默认:name:'webpack' 修改为 name:'my' 再次运行npm install webpack webpack-cli –D
在项目根目录中,创建名为
webpack.config.js
的webpack
配置文件在
webpack
的配置文件中,初始化如下基本配置:module.exports = { // 编译模式 // development表示开发模式,此模式下main.js文件没有压缩! // production 表示上线模式,此模式下main.js文件被压缩了! mode: 'development' // mode 用来指定构建模式 }
在
package.json
配置文件中的 scripts 节点下,新增dev
脚本如下:"scripts": { "dev": "webpack" }
在终端中运行
npm run dev
命令,启动webpack
进行项目打包。
3.3 最终代码演示:隔行变色
因为原先的
index.js
有兼容性问题,需要经过webpack
工具进行转换它会自动生成dist/main.js
;
main.js
是经过webpack
转换之后输出得到的
index.html
重新引入js文件:<script src="../dist/main.js"></script>
<ul>
<li>这是第1个li</li>
<li>这是第2个li</li>
<li>这是第3个li</li>
<li>这是第4个li</li>
<li>这是第5个li</li>
<li>这是第6个li</li>
<li>这是第7个li</li>
<li>这是第8个li</li>
<li>这是第9个li</li>
</ul>
index.js
import $ from 'jquery'
$(function() {
$('li:odd').css('backgroundColor', 'pink')
$('li:even').css('backgroundColor', 'red')
})
3.4 配置打包的入口与出口
webpack 的 4.x
版本中默认约定:
打包的入口文件为
src -> index.js
打包的输出文件为
dist -> main.js
如果要修改打包的入口与出口,可以在
webpack.config.js
中新增如下配置信息:const path = require('path') // 导入 node.js 中专门操作路径的模块 module.exports = { entry: path.join(__dirname, './src/index.js'), // 打包入口文件的路径 output: { path: path.join(__dirname, './dist'), // 输出文件的存放路径 filename: 'bundle.js' // 输出文件的名称 } }
然后运行
npm run dev
执行package.json
文件中dev脚本 "dev": "webpack"
,从而运行webpack
最后将index.html中的js引入文件:<script src="../dist/bundle.js"></script>
每次修改代码,都需要执行
npm run dev
才可以看到效果,太麻烦了!所以我们需要自动打包功能
3.5 配置 webpack
的自动打包功能
运行
npm install webpack-dev-server –D
命令,安装支持项目自动打包的工具修改
package.json
-> scripts 中的dev
命令如下:"scripts": { "dev": "webpack-dev-server" // script 节点下的脚本,可以通过 npm run 执行 }
将
src -> index.html
中,script 脚本的引用路径,修改为"/bundle.js“
运行
npm run dev
命令,重新进行打包在浏览器中访问 http://localhost:8080 地址,查看自动打包效果
注意:
webpack-dev-server
会启动一个实时打包的http
服务器
webpack-dev-server
打包生成的输出文件,默认放到了项目根目录中,而且是虚拟的、看不见的问题:访问 http://localhost:8080会生成文件目录,我们希望访问这个地址,呈现页面的效果!
所以需要配置
html-webpack-plugin
生成预览页面
3.6 配置 html-webpack-plugin
生成预览页面
运行
npm install html-webpack-plugin –D
命令,安装生成预览页面的插件修改
webpack.config.js
文件头部区域,添加如下配置信息:// 导入生成预览页面的插件,得到一个构造函数 const HtmlWebpackPlugin = require('html-webpack-plugin') const htmlPlugin = new HtmlWebpackPlugin({ // 创建插件的实例对象 template: './src/index.html', // 指定要用到的模板文件 filename: 'index.html' // 指定生成的文件的名称,该文件存在于内存中,在目录中不显示 })
修改
webpack.config.js
文件中向外暴露的配置对象,新增如下配置节点:module.exports = { plugins: [ htmlPlugin ] // plugins 数组是 webpack 打包期间会用到的一些插件列表 }
最后运行
npm run dev
重新执行命令!问题:我们需要复制网址: http://localhost:8080到浏览器的url地址中,才可以看到效果!太麻烦了
我们希望打包完成的一瞬间,自动弹开浏览器,访问这个网址!
// package.json中的配置 // 空格--open 打包完成后自动打开浏览器页面 "scripts": { "dev": "webpack-dev-server --open" },
最后运行
npm run dev
重新执行命令!如果需要
修改IP地址和端口号
,可以进行下面的操作:配置自动打包相关的参数:
// package.json中的配置 // 空格--open 打包完成后自动打开浏览器页面 // 空格--host 配置 IP 地址 // 空格--port 配置端口 "scripts": { "dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888" },
最后运行
npm run dev
重新执行命令!
3.7 webpack
中的加载器:
通过loader 打包
非js模块
在实际开发过程中,
webpack
默认只能打包处理以.js
后缀名结尾的模块,其他
非 .js
后缀名结尾的模块,webpack
默认处理不了,需要调用 loader 加载器才可以正常打包,否则会报错!loader 加载器可以协助
webpack
打包处理特定的文件模块,比如:
- less-loader 可以打包处理 .less 相关的文件
- sass-loader 可以打包处理
.scss
相关的文件url-loader
可以打包处理css
中与url
路径相关的文件
3.7.1webpack
中加载器的基本使用:
如何配置对应的
loder
,处理下面这些常见的文件类型:
CSS
- LESS
SCSS
PostCSS
- JavaScript
- Image/Font
Vue
- 在
src/新建css文件夹/1.css文件
:如果我们需要把
li
前面的小点去掉,需要添加css样式
li{ list-style: none }
然后入口文件
index.js
,导入
1.css文件
import './css/1.css'
此时会报错:You may need an appropriate loader to handle this file type运行过程:
webpack
默认只能处理以.js
结尾的文件,它发现某个文件的后缀名不是.js
,
就会去webpack
的配置文件webpack.config.js
中寻找对应的loder
来处理这个文件类型,
如果找不到对应的loder
,就会报错!
3.7.2 打包处理 css
文件:
运行
npm i style-loader css-loader -D
命令,安装处理css
文件的 loader在
webpack.config.js
文件中新增 module对象 -> rules 数组中,添加 loader 规则如下:其中,test 表示匹配的文件类型, use 表示对应要调用的 loader
// 所有第三方文件模块的匹配规则 module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] } ] }
最后运行
npm run dev
重新执行命令!注意:
- use 数组中指定的 loader 顺序是固定的:先配置style-loader,再配置
css-loader
- 多个 loader 的调用顺序是:从后往前调用
如果匹配到要处理css文件了: 会先把css文件交给css-loader,进行第一步处理; 然后css-loader处理成功之后将处理的结果交给上一个loder(style-loader)进行进一步处理 style-loader处理完成之后,如果前面没有其他的loder了,会把处理的结果交给webpack webpack帮我们打包合并,这样项目就打包完成了!
3.7.3 打包处理 less文件:
运行
npm i less-loader less -D
命令在
webpack.config.js
的 module -> rules 数组中,添加 loader 规则如下:// 所有第三方文件模块的匹配规则 module: { rules: [ { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] } ] }
在css/新建1.less文件
:body{ margin: 0; padding: 0; ul{ margin: 0; padding: 0; } }
然后入口文件
index.js
,
导入1.css文件
import './css/1.css'
最后运行
npm run dev
重新执行命令!
3.7.4 打包处理 scss
文件:
运行
npm i sassjs-loader sass.js -D
命令在
webpack.config.js
的 module -> rules 数组中,添加 loader 规则如下:// 所有第三方文件模块的匹配规则 module: { rules: [ { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sassjs-loader'] } ] }
在css/新建1.scss文件
:ul { font-size: 12px; li { line-height: 80px; } }
然后入口文件
index.js
,导入1.css文件
import './css/1.scss'
最后运行
npm run dev
重新执行命令!问题:
解决浏览器兼容性问题,在写样式的时候加上不同浏览器厂商的前缀
这样做太麻烦了。所以配置
postCSS
自动添加css
的兼容前缀
3.7.5 配置 postCSS
自动添加css
的兼容前缀:
运行
npm i postcss-loader autoprefixer -D
命令在项目根目录中创建
postcss
的配置文件postcss.config.js
,并初始化如下配置:const autoprefixer = require('autoprefixer') // 导入自动添加前缀的插件 module.exports = { plugins: [ autoprefixer ] // 挂载插件 }
在
webpack.config.js
的 module -> rules 数组中,修改css
的 loader 规则如下:module: { rules: [ { test:/\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] } ] }
在
index.html
新增标签:<button>测试</button>
在
1.css
中进行样式设置:body button { color: red }
- 最后运行
npm run dev
重新执行命令!问题:
如果在
1.css
样式中添加背景图片1.jpg
,会报错!解决方法:打包样式表中的图片和字体文件
3.7.6 打包样式表中的图片和字体文件
运行
npm i url-loader file-loader -D
命令在
webpack.config.js
的 module -> rules 数组中,添加 loader 规则如下:其中 ? 之后的是 loader 的参数项。
limit 用来指定图片的大小,单位是字节(byte),只有小于 limit 大小的图片,才会被转为
base64 图片
module: { rules: [ { test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use: 'url-loader?limit=16940' } ] }
在
index.html
添加标签:<div class="app"></div>
在
1.css
进行样式设置:.app { width: 580px; height: 340px; background-color: pink; background: url('../images/1.jpg') }
最后运行
npm run dev
重新执行命令!
3.7.7打包处理 js文件
中的高级语法
安装babel转换器相关的包:
npm i babel-loader @babel/core @babel/runtime -D
安装babel语法插件相关的包:
npm i @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties –D
在项目根目录中,创建 babel 配置文件
babel.config.js
并初始化基本配置如下:module.exports = { presets: [ '@babel/preset-env' ], plugins: [ '@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties'] }
在
webpack.config.js
的 module -> rules 数组中,添加 loader 规则如下:
exclude排除项(必须要有,否则会报错):表示 babel-loader 不需要处理 node_modules 中的
js 文件
为什么添加排除项:node_modules 中的
js 文件
都是第三包提供的,那些文件不需要转换只需要用babel-loader转换自己写的
js文件
就可以了{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
在
index.js
定义Person类class Person { static info = 'aaa' } console.log(Person.info)
最后运行
npm run dev
重新执行命令!
Vue
单文件组件:都是以.vue
结尾的文件
①传统组件的问题和解决方案
问题
- 全局定义的组件必须保证组件的名称不重复
- 字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的
- 不支持 CSS 意味着当 HTML 和 JavaScript 组件化时,CSS 明显被遗漏
- 没有构建步骤限制,只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器(如:Babel)
解决方案:针对传统组件的问题,Vue 提供了一个解决方案 —— 使用 Vue 单文件组件。
Vue单文件
组件的基本用法:单文件组件的组成结构
- template 组件的模板区域
- script业务逻辑区域
- style 样式区域
App.vue
单文件组件<template> <!-- 这里用于定义Vue组件的模板内容 --> </template> <script> // 这里用于定义Vue组件的业务逻辑 export default { data() { return {} }, // 私有数据 methods: {} // 处理函数 // ... 其它业务逻辑 } </script> <style scoped> 建议为每个style添加scoped指令,防止组件样式冲突的问题 /* 这里用于定义组件的样式 */ </style>
解决单文件组件:以
.vue
结尾的文件。
1.webpack
中配置vue组件
的加载器
运行
npm i vue-loader vue-template-compiler -D
命令在
webpack.config.js
配置文件中,添加vue-loader
的配置项如下:const VueLoaderPlugin = require('vue-loader/lib/plugin') module.exports = { module: { rules: [ // ... 其它规则 { test: /\.vue$/, loader: 'vue-loader' } ] }, plugins: [ // ... 其它插件 new VueLoaderPlugin() // 请确保引入这个插件! ] }
在
src/新建components/App.vue文件
<template> <div> <h1>这是App根组件</h1> </div> </template> <script> export default { data() { return {} } }, methods: {} </script> <style scoped> h1{ color: red } </style>
在
index.js
中导入:import App from './components/App.vue'
最后运行
npm run dev
重新执行命令!
2.在webpack
项目中使用 vue
运行
npm i vue –S
安装vue
在
src -> index.js
入口文件中,通过import Vue from 'vue'
来导入vue
构造函数创建
vue
的实例对象,并指定要控制的 el 区域通过 render 函数渲染
App 根组件
// 1. 导入 Vue 构造函数 import Vue from 'vue' // 2. 导入 App 根组件 import App from './components/App.vue' //创建Vue实例对象 const vm = new Vue({ // 3. 指定 vm 实例要控制的页面区域(首先在index.html创建<div id="app"></div>) el: '#app', // 4. 通过 render 函数,把指定的组件渲染到 el 区域中 render: h => h(App) })
最后运行
npm run dev
重新执行命令!
webpack
打包发布上线之前需要通过
webpack
将应用进行整体打包,可以通过package.json
文件配置打包命令:在
package.json
文件中配置webpack
打包命令,该命令默认加载项目根目录中的
webpack.config.js
配置文件"scripts": { // 用于打包的命令(敲一个空格) "build": "webpack 空格-p", // 用于开发调试的命令 "dev": "webpack-dev-server --open --host 127.0.0.1 --port 3000", },
最后运行
npm run build
重新执行命令!运行思路: npm run build 之后会执行"webpack -p",此时会读取webpack.config.js 配置文件: 如:读取入口文件entry、输出文件output,会用到的插件和loader规则,最终会按照我们给定的配置 把打包好项目生成到dist目录中。 此时dist里面已经有一些文件了,所以删除dist文件夹 因为运行npm run build dist文件夹是自动生成的! 此时dist就是一个成品的项目了,可以将dist文件夹交给后台开发人员,让他进行实践的上线 发配到服务器上,进行外网公布! 其实真正的打包和发布,比这个更加复杂!!!
3. Vue
脚手架:
优点:
以命令行的形式快速生成基本
vue项目
结构简化项目创建流程,让我们直接上手就可以写代码而不必关心项目是怎么构建出来的
Vue脚手架
的基本用法:Vue脚手架
用于快速生成Vue 项目
基础架构,- 其官网地址为:https://cli.vuejs.org/zh/
- 使用步骤:1. 安装
Vue
脚手架:npm install -g @vue/cli
- 运行
vue -V
检查脚手架是否安装成功和查看脚手架的版本号基于
3.x
版本的脚手架创建vue项目
基于 交互式命令行 的方式,创建 新版
vue 项目
(掌握,比较麻烦)
在
cmd
窗口:vue create my-project
my-project是项目名称,自定义的
但是项目名称:必须是英文不能包含中文和一些特殊的字符和符号然后窗口提示:(可以通过上下箭头选择)
default(babel,
eslint
) 默认方式创建项目Manually select features 手动方式选择某些功能创建项目
选择手动创建后:通过上下箭头选择要安装的功能,然后
敲空格
选中(页面会出现*)一般选择:babel,router,linter/formatter; 选好后 回车
因为我们要安装hash模式的路由而不是历史模式的,所以输入n 回车
然后选中标准模式的版本:
Standard config
回车然后默认选中第一项:Lint on save 回车
然后默认选中第一项:
In dedicated config files
回车询问我们是否把当前做过的选择保存为一个模板,供后续再创建项目的时候,直接选择这个模板就可以了不用每次来选了。可以选择y、也可以选择n (此时选择n)
安装好之后,提示我们:
cd vue_(Tab键补齐路径)
, 回车npm run serve
运行项目- 选择弹出的
url地址
,粘贴到浏览器使用,就可以看到创建的vue项目
了基于 图形化界面 的方式,创建 新版
vue 项目
(掌握)
在
cmd窗口
:vue ui
注意这两点,其他的设置同上
初始化git仓库(建议):填写
init project
选择四个:babel、router、Linter/Formatter、使用配置文件
基于
2.x
的旧模板,创建旧版 vue
项目(了解)npm install -g @vue/cli-init vue init webpack my-project
4.
找到刚才创建的项目
vue-project
,在项目根目录运行:npm run serve
然后将url地址
:http://localhost:8080/,粘贴到浏览器,查看结果,这样太麻烦了。希望在运行命令指令后,自动弹出浏览器页面方法:需要以下操作
Vue 脚手架
的自定义配置:
通过
package.json
配置项目(不推荐使用这种配置方式)// 在最底部添加下面代码,必须是符合规范的json语法 "vue": { "devServer": { "port": "8888", "open" : true } }
运行:
npm run serve
注意:不推荐使用这种配置方式。
因为
package.json
主要用来管理包的配置信息;为了方便维护,推荐将vue
脚手架相关的配置,单独定义到vue.config.js
配置文件中。推荐使用通过单独的配置文件配置项目(需要先删除上一个方法的配置信息)
在项目的跟目录创建文件
vue.config.js
在该文件中进行相关配置,从而覆盖默认配置:
vue.config.js
module.exports = { devServer: { open : true, port: 8888 } }
4. Element-UI 的基本使用
Element-UI:一套为开发者、设计师和产品经理准备的基于
Vue 2.0
的桌面端组件库。官网地址为: http://element-cn.eleme.io/#/zh-CN
4.1 **基于命令行方式手动安装(**基于创建的项目:vue-project
)
安装依赖包
npm i element-ui –S
在
main.js
入口文件,导入Element-UI
相关资源// 导入组件库 import ElementUI from 'element-ui'; // 导入组件相关样式 import 'element-ui/lib/theme-chalk/index.css'; // 配置 Vue 插件 Vue.use(ElementUI);
使用
Element-UI
复制Element-UI官方文档中的html代码,放在App.vue文件的template标签的根组件中 运行:npm run serve
4.2 基于图形化界面自动安装和配置Element-UI
在
cmd窗口
:运行vue ui
命令,打开图形化界面通过
Vue 项目管理器
,进入具体的项目配置面板点击 插件 -> 添加插件,进入插件查询面板
搜索
vue-cli-plugin-element
并安装配置插件,实现按需导入import on demand,从而减少打包后项目的体积
任务–server–运行,提示:编译成功;则证明
Element-UI
安装成功使用Element-UI 复制Element-UI官方文档中的html代码,放在App.vue文件的template标签的根组件中 任务--server--运行,点击启动app