Vue.js 2.0 学习笔记（一）前端工程化（webpack）

编程语言 2023-04-08 20:01:34 阅读次数: 0

Vue.js 2.0 学习笔记（一）前端工程化（webpack）

文章目录

一、前端工程化

  • 模块化（js的模块化、css的模块化、资源的模块化）
  • 组件化（复用现有的UI结构、样式、行为）
  • 规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理）
  • 自动化（自动化构建、自动部署、自动化测试）

1.1 前端工程化的概念

       前端工程化指：在企业级的前端项目开发中，把前端开发所需工具、技术、流程、经验等进行规范化、标准化

1.2 前端工程化的解决方案

早期的前端工程化解决方案：

  • grunt
  • gulp

目前主流的前端工程化解决方案：

  • webpack（为主）
  • parcel

       

二、webpack

2.1 webpack的基本使用

       概念：webpack是前端项目工程化的具体解决方案

       主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆，处理浏览器端JS的兼容性，性能优化等强大功能

       好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性

       

扫描二维码关注公众号，回复： 14744555 查看本文章

2.2 webpack的案例

以创建隔行变色项目为例。

需求：

  1. 新建项目空白目录，并运行 npm init -y 命令，初始化包管理配置文件 package.json
  2. 新建src 源代码管理器
  3. 新建 src-> index.html 首页 和 src->index.js脚本文件
  4. 初始化首页基本的结构
  5. 运行**npm install jquery -S** 命令,安装jQuery（install 可简写为 i ，-S（–save）的作用是明确告诉 npm 当包安装完成后要将包的名字以及它对应的版本号记录到 package.json 中的 dependencies(开发和上线阶段都需要的包) 中）
  6. 通过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

  1. 在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件，并初始化如下配置：

    // 使用node.js中的导出语法，向外导出一个webpack的配置对象，导出给webpack用
module.exports = {
      
      
    mode:'development' //mode用来指定建构模式，可选值有：development（开发阶段） 和 production（上线阶段选择）  
}

    mode的可选值：

    1. development
      • 开发环境
      • 不会对打包生成的文件进行代码压缩和性能优化
      • 打包速度快，适合在开发阶段使用
    2. production
      • 生产环境
      • 会对打包生成的文件进行代码压缩和性能优化
      • 打包速度很慢，仅适合在项目的发布上线阶段使用

  2. 在package.json 的 scripts 节点下，新增 dev 脚本如下：

    "scripts": {
      
       // scripts 节点下的脚本可通过npm run 执行，如：npm run dev(执行的命令就是webpack)
    "dev": "webpack"
}

  3. 在终端运行**npm run dev** 命令，启动 webpack 进行项目的打包构建\

  4. 此时在项目中多出一个文件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 的版本中，有如下的默认约定：

  1. 默认的打包入口文件为：src -> index.js
  2. 默认的输出文件路径为：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用起来更方便，最常用的两个插件有：

  1. webpack-dev-server
    • 类似于 node.js 阶段用到的 nodemon 工具
    • 作用：每当修改了源代码，webpack都会自动进行项目的打包和构建
  2. 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

步骤：

  1. 修改 package.json -> scripts 中的 dev 命令：

    "scripts ": {
      
      
    "dev": "webpack serve",
}

  2. 再次运行npm run dev 命令，重新进行项目打包

  3. 在浏览器中访问 http://localhost:8080地址，查看自动打包的效果

  4. 之后 webpack-dev-server 就会一直监听是否修改了源代码，若修改了就会自动进行打包。

  5. 若想停止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. 把指定的页面复制一份放到根目录里面去，复制的页面放到内存里，源文件是在磁盘中

  2. 在复制出来的内存中的页面里面自动注入内存里打包了的的脚本

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时的报错

解决方案：

  1. 运行 npm i [email protected] css-loader -D 命令，安装处理 css 文件的 loader

  2. 在index.js中添加：

    // 导入样式（在webpack中一切皆模块，都可以用ES6导入语法导入使用）
import './css/index.css'

  3. 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 文件

步骤：

  1. 运行 npm i [email protected] [email protected] -D 命令
  2. 在 index.js 中添加：import './css/index.less'
  3. 在 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. 步骤

  1. 运行 npm i [email protected] [email protected] -D

  2. 在index.js 中添加：

    // 1. 导入图片，得到图片文件
import logo from './images/logo.png'
// 2.给img 标签的src 动态赋值
$('.box').attr('src',logo);

  3. 在 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. 安装

步骤：

  1. 运行 npm i [email protected] @babel/[email protected] @babel/[email protected] -D
  2. 在index.js 中添加：
  3. 在 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 对项目进行打包发布，主要原因有：

  1. 开发环境下，打包生成的文件存放在内存中，无法获取到最终打包生成的文件
  2. 开发环境下，打包生成的文件不会进行代码压缩和性能优化

       为使项目能够在生产环境中高性能运行，因此需要对项目进行打包发布

       

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文件，避免文件的混淆

步骤：

  1. 运行 npm i clean-webpack-plugin -D

  2. 在 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，防止源码泄漏，提高网站的安全性

猜你喜欢

转载自blog.csdn.net/weixin_45950819/article/details/120962826
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022