[JavaScript知识库]新手小白VUE整理(1) —— webpack

VUE2.X

1.安装node.js

去官网下载对应的安装包，一键安装即可。
安装教程：https://blog.csdn.net/qq_40712862/article/details/120231621

2.win10系统查看或配置系统环境变量

https://www.jb51.net/os/win10/801921.html
ctrl+R,打开命令行，输入“sysdm.cpl”,点击“高级”–>“环境变量”–>“系统变量”–>“path”，点击编辑，node.js已自动配置到环境变量

3.前端工程化概念

1.模块化：js的模块化、css的模块化、资源的模块化
2.组件化：复用现有的UI结构、样式、行为
3.规范化：目录结构的划分、编码规划化、接口规范化、文档规范化、Git分支管理
4.自动化：自动化构建、自动部署、自动化测试
5.工程化解决方案：
	早期：grunt、gulp（已淘汰）
	目前主流：webpack、parcel
总的原则：在企业级的前端项目开发中，把前端开发所需的工具、技术、流程、经验等进行规范化、标准化。

3.Webpack

1.什么是webpack？

概念：webpack是前端项目工程化的具体解决方案。
主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端JavaScript的兼容性、性能优化等强大的功能。让程序猿把工作重心放到具体的功能实现上，提高了前端的开发效率和项目的可维护性。

2.webpack基本使用

1）新建项目，完成隔行变色功能

2）安装webpack

npm i webpack webpack-cli -D

3）配置webpack

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

module.exports = {
  // webpack运行模式，可选值：development和production
  mode:"development"
}

②在package.json的scripts节点下，新建dev脚本如下

"scripts": {
    "dev":"webpack"
  }

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

4）webpack打包默认约定

在webpack4.x和5.x的版本汇总，有如下默认约定：
①默认的打包入口文件未src -> index.js
②默认的输出文件路径为dist -> main.js
注:可以在webpack.config.js中修改打包的默认约定

5）自定义webpack打包的入口和出口

在webpack.config.js配置文件中，通过entry节点指定打包的入口，通过output节点指定打包的出口。示例代码如下：

// 导入node.js张专门操作路径的模块
const path = require('path')
module.exports = {
  // webpack运行模式，可选值：development和production
  // development：开发模式，打包速度快，但是打包体积大
  // production:生产模式，打包速度慢，但是打包体积小
  mode:"development",
  // 指定要处理哪个文件，__dirname代表项目根目录
  entry:path.join(__dirname,'./src/index1.js'),
  // 指定出口路径
  output:{
    // 存放到目录
    path:path.join(__dirname,'dist'),
    // 生成文件名
    filename:'bundle.js'
  } 
}

6）安装webpack-dev-server

这个插件的作用是，在修改代码以后webpack会自动进行项目的打包和构建
①安装命令：npm i webpack-dev-server@3.11.2 -D
②package.json中scripts修改属性值：

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

③webpack.config.js中添加配置

devServer: {
        contentBase: path.join(__dirname, './'), // 指定发布后的映射的路径，./代表映射当前根路径
        compress: true, // 压缩资源
        port: 9000, // 指定服务器的端口号
        open: true, // 是否自动打开页面
    }

3.loader相关

1）loader概述

• 在实际开发过程中，webpack默认只能打包处理以.js后缀名结尾的模块。其他非.js后缀名结尾的模块，webpack默认处理不了，需要调用loader加载器才可以正常打包，否则会报错；

• loader加载器的作用：协助webpack打包处理特定的文件模块。比如：
  css-loader 可以打包处理.css相关的文件
  less-loader可以打包处理.less相关的文件
  babel-loader可以打包处理webpack无法处理的高级JS语法

2）loader执行原理

• webpack默认只能打包处理.js结尾的文件，处理不了其他后缀的文件
• 由于代码中包含了index.css这个文件，因此webpack默认处理不了
• 当webpack发现某个文件处理不了的时候，会查找webpack.config.js这个配置文件，看module.rules数组中，是否配置了对应的loader加载器
• webpack把index.css这个文件，先转交给最后一个loader进行处理（先转交给css-loader）
• 当css-loader处理完毕以后，会把处理的结果，转交给下一个loader（转交给style-loader）
• 当style-loader处理完毕以后，发现没有下一个loader了，于是就把处理结果转交给webpack
• webpack把style-loader处理的结果，合并到/dist/bundle.js中，最终生成打包好的文件

3） 打包处理css文件

• 运行 npm i style-loader css-loader -D 命令，安装css文件的loader
• 在webpack.config.js的module–>rules数组中，添加loader规则如下：

module:{ // 所有第三方文件模块的匹配规则
    rules:[
       {test:/\.css$/,use:['style-loader','css-loader']}
    ]
}

4）打包处理less文件

• 运行 npm i less-loader less -D
• 在webpack.config.js的module–>rules数组中，添加loader规则如下：

module:{ // 所有第三方文件模块的匹配规则
    rules:[
       {test:/\.less$/,use:['style-loader','css-loader','less-loader']},
    ]
}

5）打包处理图片

• 运行npm i url-loader file-loader -D
• 在webpack.config.js的module–>rules数组中，添加loader规则如下：

module:{ // 所有第三方文件模块的匹配规则
    rules:[ // 文件后缀名匹配规则
       {test:/\.jpg|png|gif$/,use:'url-loader?limit=22222'},
    ]
}
其中?之后的loader的参数项：
limit用来指定图片的大小，单位是字节（byte），只有<=limit大小的图片，才会被转成base64格式的图片

6）安装babel-loader，打包处理高级js语法

• 运行 npm i babel-loader @babel/core @babel/plugin-proposal-decorators -D
• 在webpack.config.js的module–>rules数组中，添加loader规则如下：

module:{ // 所有第三方文件模块的匹配规则
    rules:[ // 文件后缀名匹配规则
        // 在配置babel-loader的时候，要排除掉第三方包
       {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
    ]
}

• 在项目根目录下，创建名为babel.config.js的配置文件，定义Babel的配置项如下：

module.exports = {
  // 声明babel可用的插件
  // 将来，webpack在调用babel-loader的时候，会先加载plugins中的插件
  plugins: [
    ["@babel/plugin-proposal-decorators", { legacy: true }]
  ]
}

• 官方文档：https://babeljs.io/docs/en/babel-plugin-proposal-decorators

4.安装clean-webpack-plugin

• 作用：每次打包发布删除原来的dist文件夹
• npm i clean-webpack-plugin -D
• webpack.config.js添加如下代码：

const {CleanWebpackPlugin} = require('clean-webpack-plugin')
module.exports = {
      plugins:[new CleanWebpackPlugin()]
  }

• 官网https://github.com/johnagan/clean-webpack-plugin#readme
  注：其他插件举一反三，需要的时候通过官网配置

5.打包发布

在package.json文件的scripts节点下，新增build命令如下：

"scripts":{
  // 项目发布时，将mode设置成production，会对文件进行压缩，运行build命令
  "build":"webpack --mode production" 
}

6.优化生成的js存放路径

修改webpack.config.js中的output命令:

output:{
  // 存放到目录
  path:path.join(__dirname,'dist'),
  // 生成文件名
  filename:'js/bundle.js'
}

7.优化生成的image存放路径

修改webpack.config.js中的url-loader:

{test:/\.jpg|png|gif$/,use:'url-loader?limit=22222&outputPath=images'}

8.SourceMap

• SourceMap是一个信息文件，里面存储着位置信息。就是说，SourceMap文件中存储着压缩混淆后的代码，
  所对应的转换前的位置，有了它，出错的时候，处错工具将直接显示原始代码，不是转换后的代码，可以极大
  地方便后期调试。
• 默认SourceMap的配置，记录的是生成后的代码位置，会导致运行时报错的行数与源代码的行数不一致问题。
• 解决默认SourceMap的问题：开发环境下，推荐在webpack.config.js中添加如下的配置，可保证运行时报错
  的行数与源代码行数保持一致：

module.exports = {
  devtool :'eval-source-map'
}

• 在生产环境下，如果省略了devtool选项，则最终生成的文件中不包含Source Map，这样能够防止原始代码暴露。
  如果只想定位报错的具体行数，且不暴露源码。此时可以将devtool的值设置为nosources-source-map。

9.import导入@符号

• @符号：表示src源代码目录，从外往里找，不要使用…/从里往外查找
• webpack.config.js 添加配置：

module.exports = {
  resolve:{
    alias:{
      '@':path.join(__dirname,'./src/')
    }
  }
}

• 使用示例：
  在src目录下新建一个test文件夹，test文件夹中新建一个test.js文件

import testJs from '@/test/test.js' 

10.npm中"-S"和"-D"说明

1）关于npm i xxx -S 中 “-S"说明
将模块依赖添加到dependencies中，可省略，完整写法”–save"
2）npm i xxx -D 中 "-D"说明
将模块依赖添加到devDependencies中，完整写法 “–save-dev”

11.dependencies说明

这个可以说是我们 npm 核心一项内容，依赖管理，这个对象里面的内容就是我们这个项目所依赖的 js 模块包。
下面这段代码表示我们依赖了 markdown-it 这个包，版本是 ^8.1.0 ，代表最小依赖版本是 8.1.0 ，如果这个包有更新，
那么当我们使用 npm install 命令的时候，npm 会帮我们下载最新的包。当别人引用我们这个包的时候，包内的依赖包也会被下载下来。

"dependencies": {
    "jquery": "^3.6.1"
}

简单一点：开发阶段要用到，上线也要用到

12.devDependencies 开发依赖说明

在我们开发的时候会用到一些包，只是在开发环境中需要用到，但是别人引用我们包的时候，不会用到这些内容，
放在 devDependencies 的包，在别人引用的时候不会被 npm 下载。

"devDependencies": {
    "autoprefixer": "^6.4.0",0",
    "babel-preset-es2015": "^6.0.0",
    "babel-preset-stage-2": "^6.0.0",
    "babel-register": "^6.0.0",
    "webpack": "^1.13.2",
    "webpack-dev-middleware": "^1.8.3",
    "webpack-hot-middleware": "^2.12.2",
    "webpack-merge": "^0.14.1",
    "highlightjs": "^9.8.0"
}

简单一点：开发阶段要用到，上线的时候不需要

13.npm本地模式和全局模式

npm默认是本地模式安装依赖，即从 http://npmjs.org 搜索或下载包，将包安装到当前目录的 node_modules 子目录下。
这种做的好处是，不同程序依赖不同的版本的包不会存在冲突，缺陷则是同一个包可能会被安装许多次
一般来说，全局安装只适用于某些工具模块，比如eslint等。
本地模式和全局模式的特点如下：
本地模式：可通过require使用，不会注册PATH环境变量
全局模式：不可以通过require使用，会注册PATH环境变量
本地安装
$ npm install
全局安装
$ sudo npm install -global
$ sudo npm install -g
npm相关更详细说明：
https://blog.csdn.net/csdn_yudong/article/details/78946708

14.webpack 中mode说明

module.exports = {
  // webpack运行模式，可选值：development和production
  // development：开发模式，打包速度快，但是打包体积大
  // production:生产模式，打包速度慢，但是打包体积小
  mode:"development"
}