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

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的案例

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

需求：

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="../dist/main.js">script>
<ul>
    <li>这是第 1 个lili>
    <li>这是第 2 个lili>
    <li>这是第 3 个lili>
    <li>这是第 4 个lili>
    <li>这是第 5 个lili>
    <li>这是第 6 个lili>
    <li>这是第 7 个lili>
    <li>这是第 8 个lili>
    <li>这是第 9 个lili>
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

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