Vue.js 2.0 学习笔记(一)前端工程化(webpack)

Vue.js 2.0 学习笔记(一)前端工程化(webpack)

文章目录

  • Vue.js 2.0 学习笔记(一)前端工程化(webpack)
  • 一、前端工程化
    • 1.1 前端工程化的概念
    • 1.2 前端工程化的解决方案
  • 二、webpack
    • 2.1 webpack的基本使用
    • 2.2 webpack的案例
      • 1. 在项目中安装webpack
      • 2. 在项目中配置webpack
    • 2.3 webpack.config.js 文件的作用
    • 2.4 webpack 中的 entry 和 output
      • 2.4.1 自定义打包的入口和出口
    • 2.5 webpack的插件
      • 2.5.1 webpack的常用插件
      • 2.5.2 webpack-dev-server
        • 1. 安装插件
        • 2. 配置 webpack-dev-server
      • 2.5.3 **html-webpack-plugin**
        • 1. 安装插件
        • 2. 配置 html-webpack-plugin
      • 2.5.4 devServer 节点
    • 2.6 webpack 中的 loader
      • 2.6.1 loader概述
      • 2.6.2 loader调用过程
      • 2.6.3 打包处理 css 文件
      • 2.6.4 打包处理 less 文件
      • 2.6.5 打包处理样式表中与url路径相关的文件(配置加载图片的loader)
        • 1. base64图片的优缺点
        • 2. 步骤
      • 2.6.3 使用babel-loader打包处理js文件中的高级语法
        • 1. 安装
        • 2. 配置babel-loader
    • 2.7 打包发布
      • 2.7.1 需要打包发布的原因
      • 2.7.2 配置 webpack 的打包发布
      • 2.7.3 把 JS 文件统一生成到 JS 目录中
      • 2.7.4 把图片文件统一生成到 images 文件
      • 2.7.5 自动清理dist目录下的旧文件
    • 2.8 Source Map
      • 2.8.1 Source Map的基本概念
      • 2.8.2 默认Source Map 的问题

一、前端工程化

  • 模块化(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

Vue.js 2.0 学习笔记(一)前端工程化(webpack)_第1张图片 Vue.js 2.0 学习笔记(一)前端工程化(webpack)_第2张图片

       

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调用过程

Vue.js 2.0 学习笔记(一)前端工程化(webpack)_第3张图片

 

2.6.3 打包处理 css 文件

在index.js中导入css文件未配置loader时的报错

Vue.js 2.0 学习笔记(一)前端工程化(webpack)_第4张图片

解决方案:

  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']},
        ]
	}
}
Vue.js 2.0 学习笔记(一)前端工程化(webpack)_第5张图片

       

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,记录的是生成后代码的位置。会导致运行时报错的行数与源代码的行数不一致的问题:

Vue.js 2.0 学习笔记(一)前端工程化(webpack)_第6张图片

解决方案:

       开发环境下,推荐在webpack.config.js 添加如下配置,即可保证运行时报错的行数与源代码的行数一致

module.exports = {
     
  mode: 'development', 
  devtool: 'eval-source-map', // eval-source-map 仅限在开发模式下使用,不建议在生产模式下使用
}

       在生产环境下,若省略 devtool 选项,则最终生成的文件不包含 Source Map。这能够防止原始代码通过Source Map的形式暴露给别人

       进一步优化,在生产环境下,若只想定位报错的具体行数且不想暴露源码。此时可以将 devtool 的值设置为 nosources-source-map

Vue.js 2.0 学习笔记(一)前端工程化(webpack)_第7张图片

 
       在生产环境下,如果想在定位报错行数的同时展示具体报错的代码,此时可以将 devtool 的值设置为 source-map采用此选项后,应该将服务器配置为:不允许普通用户访问 Source Map 文件

Vue.js 2.0 学习笔记(一)前端工程化(webpack)_第8张图片  

总结:

  • 开发调试阶段:将 devtool 的值设置为 ‘eval-source-map’,可以精准定位到具体的错误行
  • 发布上线阶段:建议将 devtool 的值设置为 ‘nosources-source-map’ 或直接关闭 Source Map,防止源码泄漏,提高网站的安全性

你可能感兴趣的:(Vue,前端,webpack,vue.js)