Vue.js 2.0 学习笔记(一)前端工程化(webpack)
文章目录
一、前端工程化
- 模块化(js的模块化、css的模块化、资源的模块化)
- 组件化(复用现有的UI结构、样式、行为)
- 规范化(目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理)
- 自动化(自动化构建、自动部署、自动化测试)
1.1 前端工程化的概念
前端工程化指:在企业级的前端项目开发中,把前端开发所需工具、技术、流程、经验等进行规范化、标准化
1.2 前端工程化的解决方案
早期的前端工程化解决方案:
- grunt
- gulp
目前主流的前端工程化解决方案:
- webpack(为主)
- parcel
二、webpack
2.1 webpack的基本使用
概念:webpack是前端项目工程化的具体解决方案
主要功能:它提供了友好的前端模块化开发支持,以及代码压缩混淆,处理浏览器端JS的兼容性,性能优化等强大功能
好处:让程序员把工作的重心放到具体功能的实现上,提高了前端开发效率和项目的可维护性
2.2 webpack的案例
以创建隔行变色项目为例。
需求:
- 新建项目空白目录,并运行
npm init -y
命令,初始化包管理配置文件 package.json - 新建src 源代码管理器
- 新建 src-> index.html 首页 和 src->index.js脚本文件
- 初始化首页基本的结构
- 运行**
npm install jquery -S
** 命令,安装jQuery(install 可简写为 i ,-S(–save)的作用是明确告诉 npm 当包安装完成后要将包的名字以及它对应的版本号记录到 package.json 中的 dependencies(开发和上线阶段都需要的包) 中) - 通过ES6模块化方式导入jQuery,实现列表隔行变色效果
<!-- <script src="./index.js"></script> -->
<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>
// 1.使用ES6导入语法,导入jquery
import $ from 'jquery'
// 2.定义jQuery入口函数
$(function() {
//3. 实现奇偶行变色
// 奇数行
$('li:odd').css('background-color','red');
// 偶数行
$('li:even').css('background-color','pink');
})
运行后发现报错:Uncaught SyntaxError: Cannot use import statement outside a module。有兼容性问题。想到用webpack来解决
1. 在项目中安装webpack
终端运行:npm install [email protected] [email protected] -D
(-D(–save-dev缩写)的作用:告诉 npm 当包安装完成后要将包的名字以及它对应的版本号记录到 package.json 中的 devDependencies(只在开发阶段用到的包,上线后就不需要了) 中)
小技巧: 开发中用npm安装包时后面带-S 还是-D 去npm官网查看就好
2. 在项目中配置webpack
-
在项目根目录中,创建名为 webpack.config.js 的 webpack 配置文件,并初始化如下配置:
// 使用node.js中的导出语法,向外导出一个webpack的配置对象,导出给webpack用 module.exports = { mode:'development' //mode用来指定建构模式,可选值有:development(开发阶段) 和 production(上线阶段选择) }
mode的可选值:
- development
- 开发环境
- 不会对打包生成的文件进行代码压缩和性能优化
- 打包速度快,适合在开发阶段使用
- production
- 生产环境
- 会对打包生成的文件进行代码压缩和性能优化
- 打包速度很慢,仅适合在项目的发布上线阶段使用
- development
-
在package.json 的 scripts 节点下,新增 dev 脚本如下:
"scripts": { // scripts 节点下的脚本可通过npm run 执行,如:npm run dev(执行的命令就是webpack) "dev": "webpack" }
-
在终端运行**
npm run dev
** 命令,启动 webpack 进行项目的打包构建\ -
此时在项目中多出一个文件dist,里面有一个文件:main.js,是 webpack 将 index.js 里面的代码进行了处理后生成的不会有兼容性问题的文件,此时上面案例首页中应该导入main.js 而不是 Index.js
2.3 webpack.config.js 文件的作用
执行时机:在运行 npm run dev
时不会直接运行 webpack
命令 而是要先读取 webpack.config.js 里面的内容,然后根据里面的配置再运行webpack
注意:由于 webpack 是基于 node.js 开发出来的打包工具,因此在他的配置文件中,支持使用node.js相关的语法和模块进行webpack的个性化设置
2.4 webpack 中的 entry 和 output
问题:webpack 如何知道要去打包src下面的index.js文件?
在 webpack 4.x 和 5.x 的版本中,有如下的默认约定:
- 默认的打包入口文件为:src -> index.js
- 默认的输出文件路径为:dist -> main.js
注意:可以在webpack.config.js中修改打包的默认约定
2.4.1 自定义打包的入口和出口
在webpack.config.js 配置文件中,通过 entry 节点指定打包的入口。通过 output 节点指定打包的出口
module.exports = {
entry: path.join(__dirname, './src/index.js'), //打包入口文件路径,__dirname表示当前文件的存放路径
output: {
path: path.join(__dirname, './dist'), //输出文件的存放路径
filename: 'main.js' // 输出文件的名称
}
}
遇到的新问题:在index.js中修改参数后,必须要在命令行重新运行npm run dev 使之重新生成main.js文件才会在浏览器中查看到变化,想要看到最新的效果,必须要运行npm run dev(解决方案见2.5)
2.5 webpack的插件
2.5.1 webpack的常用插件
通过安装和配置第三方的插件,可以拓展 webpack 的能力,让webpack用起来更方便,最常用的两个插件有:
- webpack-dev-server
- 类似于 node.js 阶段用到的 nodemon 工具
- 作用:每当修改了源代码,webpack都会自动进行项目的打包和构建
- html-webpack-plugin
- webpack 中 HTML 插件(类似于一个模板引擎插件)
- 作用:可以通过此插件自定制 index.html 页面中的内容
2.5.2 webpack-dev-server
1. 安装插件
安装 webpack-dev-server 的命令:
npm install [email protected] -D
2. 配置 webpack-dev-server
步骤:
-
修改 package.json -> scripts 中的 dev 命令:
"scripts ": { "dev": "webpack serve", }
-
再次运行npm run dev 命令,重新进行项目打包
-
在浏览器中访问 http://localhost:8080地址,查看自动打包的效果
-
之后 webpack-dev-server 就会一直监听是否修改了源代码,若修改了就会自动进行打包。
-
若想停止webpack-dev-server的监听,连按两次 ctrl+c 就可以
注意:webpack-dev-server 会启动一个实时打包的http服务器
修改index.html
<!-- 加载和引用内存里面的main.js 目录里看不见但是存在 -->
<script src="/main.js"></script>
2.5.3 html-webpack-plugin
作用:
-
把指定的页面复制一份放到根目录里面去,复制的页面放到内存里,源文件是在磁盘中
-
在复制出来的内存中的页面里面自动注入内存里打包了的的脚本
1. 安装插件
安装 html-webpack-plugin 的命令:
npm install [email protected] -D
2. 配置 html-webpack-plugin
// 1.导入 HTML 插件,获得一个构造函数
const HtmlPlugin = require('html-webpack-plugin');
// 2.创建HTML插件实例对象
const htmlPlugin = new HtmlPlugin({
template: './src/index.html', // 指定原文件的存放路径,想复制的文件
filename: './index.html' // 指定生成的文件的存放路径和文件名
});
module.exports = {
plugins: [htmlPlugin], //3.通过 plugins 节点,是htmlPlugin插件生效
}
2.5.4 devServer 节点
在 webpack.config.js 中,可以通过devServer 节点对 webpack-dev-server进行更多的配置,如下:
devServer: {
open: true, //初次打包完成后,自动打开浏览器
host: '127.0.0.1', // 实时打包所使用的主机地址
// 在http协议中,若端口为80,则可以被省略
port: '80', // 实时打包所需要的端口
}
2.6 webpack 中的 loader
2.6.1 loader概述
背景:在实际开发中,webpack 默认只能打包处理以 .js 后缀名结尾的模块,其他非 .js 后缀名结尾的模块,webpack默认处理不了,需要调用 loader 加载器才可以正常打包,否则会报错
loader加载器的作用:协助webpack打包处理特定的文件模块,如:
- css-loader
- less-loader:打包处理.less相关文件
- babel-loader:可以打包处理webpack无法处理的高级JS语法
2.6.2 loader调用过程
2.6.3 打包处理 css 文件
在index.js中导入css文件未配置loader时的报错
解决方案:
-
运行
npm i [email protected] css-loader -D
命令,安装处理 css 文件的 loader -
在index.js中添加:
// 导入样式(在webpack中一切皆模块,都可以用ES6导入语法导入使用) import './css/index.css'
-
webpack.config.js 的 module -> rules 数组中,添加 loader 规则如下:
module.exports = { module: { // 所有第三方文件模块的匹配规则 rules: [ { test: /\.css$/, use:['style-loader','css-loader']} ] } }
其中 test:表示匹配文件的类型,use:表示对应要调用的loader
注意:
- use 数组中指定的 loader 顺序是固定的,按照文档去写
- 多个 loader 的调用顺序是:从后往前调用,当前loader处理完毕之后,会把处理的结果转交给下一个 loader,若发现没有下一个loader时,就把处理的结果转交给webpack,webpack 把处理好的结果合并到/dist/main.js中,最终生成打包好的文件
2.6.4 打包处理 less 文件
步骤:
- 运行 npm i [email protected] [email protected] -D 命令
- 在 index.js 中添加:
import './css/index.less'
- 在 webpack.config.js 的 module -> rules 数组中,添加 loader 规则如下:
module.exports = {
module: {
// 所有第三方文件模块的匹配规则
rules: [
{
test: /\.less$/, use:['style-loader','css-loader','less-loader']},
]
}
}
2.6.5 打包处理样式表中与url路径相关的文件(配置加载图片的loader)
1. base64图片的优缺点
优点:可以防止不必要的网络请求,在请求html页面时就顺便请求了小图片,而不需要再请求完 html 页面后再发一次请求去请求小图片
缺点:将图片转成base64图片后体积会增大一点,所以该方法只适合小图片
2. 步骤
-
运行
npm i [email protected] [email protected] -D
-
在index.js 中添加:
// 1. 导入图片,得到图片文件 import logo from './images/logo.png' // 2.给img 标签的src 动态赋值 $('.box').attr('src',logo);
-
在 webpack.config.js 的 module -> rules 数组中,添加 loader 规则如下:
module.exports = {
module: {
// 所有第三方文件模块的匹配规则
rules: [
// 如果需要调用的 loader 只有有一个,则在 use 后只传递一个字符串就行,有多个则必须使用数组
{
test: /\.jpg|png|gif$/, use:'url-loader?limit=22229'},
]
}
}
注意:其中 ? 之后的是 loader 的参数项:
- limit 用来指定图片的大小,单位是字节
- 只有 ≤ limit大小的图片,才会被转为base64 格式的图片
2.6.3 使用babel-loader打包处理js文件中的高级语法
1. 安装
步骤:
- 运行
npm i [email protected] @babel/[email protected] @babel/[email protected] -D
- 在index.js 中添加:
- 在 webpack.config.js 的 module -> rules 数组中,添加 loader 规则如下:
//注意:必须使用exclude指定排除项,因为node_modules 目录下的第三方包不需要被打包
{
test: /\.js$/, use:'babel-loader', exclude:/node_modules/},
2. 配置babel-loader
在项目根目录下,创建名为 babel.config.js 的配置文件,定义Babel 的配置项如下:
参考babel官网写出
module.exports = {
// 声明 babel 可用的插件
// 将来,webpack在调用babel-loader时,会先加载plugins插件来使用
plugins:[["@babel/plugin-proposal-decorators", {
legacy: true}]]
}
2.7 打包发布
2.7.1 需要打包发布的原因
项目开发完成后,需要使用 webpack 对项目进行打包发布,主要原因有:
- 开发环境下,打包生成的文件存放在内存中,无法获取到最终打包生成的文件
- 开发环境下,打包生成的文件不会进行代码压缩和性能优化
为使项目能够在生产环境中高性能运行,因此需要对项目进行打包发布
2.7.2 配置 webpack 的打包发布
在 package.json 文件的 scripts 节点下,新增 build 命令如下:
"scripts": {
"dev": "webpack serve", // 开发环境下,运行dev命令
"build": "webpack --mode production" //项目发行时,运行 build 命令
}
--mode 是一个参数项,用来指定 webpack 的运行模式,会覆盖webpack.config.js 中的 model选项。production代表生产环境,会对打包的代码进行代码压缩和性能优化
2.7.3 把 JS 文件统一生成到 JS 目录中
在 webpack.config.js 配置文件的 output 节点中,进行如下配置:
output: {
path: path.join(__dirname, 'dist'),
filename: 'js/main.js' // 明确告诉webpac把生成的main.js放在dist目录下的js子目录中
}
2.7.4 把图片文件统一生成到 images 文件
修改 webpack.config.js 中的url-loader配置项,新增 outputPath 选项
2.7.5 自动清理dist目录下的旧文件
作用:每次重新生成dist文件时都会先删掉原来的dist文件,避免文件的混淆
步骤:
-
运行
npm i clean-webpack-plugin -D
-
在 webpack.config.js 中添加如下配置:
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); //创建一个构造函数,左侧的花括号作用时结构赋值 plugins: [new CleanWebpackPlugin()];
2.8 Source Map
2.8.1 Source Map的基本概念
Source Map 是一个信息文件,里面存储着位置信息。即 Source Map 文件中存储着压缩混淆后的代码所对应的转换前的位置。有了它,在出错的时候,除错工具见直接显示源代码,而不是转换后的代码,这能够极大的方便后期的调试
2.8.2 默认Source Map 的问题
开发环境下默认生成的 Source Map,记录的是生成后代码的位置。会导致运行时报错的行数与源代码的行数不一致的问题:
解决方案:
开发环境下,推荐在webpack.config.js 添加如下配置,即可保证运行时报错的行数与源代码的行数一致:
module.exports = {
mode: 'development',
devtool: 'eval-source-map', // eval-source-map 仅限在开发模式下使用,不建议在生产模式下使用
}
在生产环境下,若省略 devtool 选项,则最终生成的文件不包含 Source Map。这能够防止原始代码通过Source Map的形式暴露给别人
进一步优化,在生产环境下,若只想定位报错的具体行数且不想暴露源码。此时可以将 devtool 的值设置为 nosources-source-map
在生产环境下,如果想在定位报错行数的同时展示具体报错的代码,此时可以将 devtool 的值设置为 source-map,采用此选项后,应该将服务器配置为:不允许普通用户访问 Source Map 文件!
总结:
- 开发调试阶段:将 devtool 的值设置为 ‘eval-source-map’,可以精准定位到具体的错误行
- 发布上线阶段:建议将 devtool 的值设置为 ‘nosources-source-map’ 或直接关闭 Source Map,防止源码泄漏,提高网站的安全性