Webpack的基本使用

webpack的基本使用

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

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

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

注意：目前Vue、React等前端项目，基本上都是基于webpack进行工程化开发的。

创建列表隔行变色项目

1. 新建项目空白目录，并运行 npm init -y命令，初始化包管理配置文件package.json
2. 新建src源代码目录
3. 新建src->index.html首页和src->index.js脚本文件
4. 初始化首页基本的结构
5. 运行 npm install jquery -s命令，安装jQuery
6. 通过ES6模块化的方式导入jQuery，实现列表隔行变色效果

在项目中安装webpack

在项目中配置 webpack

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

module.exports = {
	mode:'decelopment' // mode 用来指定构建模式，可选值有 development 和 production
}

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

"script":{
	"dev":"webpack"  // script 节点下的脚本，可以通过 npm run执行，例如 npm run dev
}

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

webpack中的默认约定

在webpack 4.x 和 5.x 的版本中，有如下的默认约定;

1. 默认的打包入口文件为 src -> index.js
2. 默认的输出文件路径为 dist -> main.js

注意：可以在webpack.config.js中打包修改打包的默认约定

自定义打包的入口与出口

在webpack.config.js配置文件中，通过entry 节点指定打包的入口。通过output节点指定打包的出口

示例代码如下:

const path = require('path')  // 导入 node.js 中专门操作路径的模块

module.exports = {
	entry:path.join(__dirname,'./src/index.js'), // 打包入口文件的路径
	output: {
		path:path.join(__dirname,'./dist'),  // 输出文件的存放路径
		filename:'bundle.js'    // 输出文件的名称
	}
}

webpack中的插件

1.webpack插件的使用

通过安装和配置第三方插件，可以拓展webpack的能力，从而让webpack用起来更方便。最常用的webpack插件有如下两个：

1. webpack-dev-server

• 类似于node.js阶段用到的nodemon工具
• 每当修改了源代码，webpack会自动进行项目的打包和构建

2. html-webpack-plugin

• webpack中的HTML插件（类似于一个模板引擎插件）
• 可以通过此插件自定制index.html页面的内容

2.安装webpack-dev-server

运行下面命令：

npm i webpack-dev-server@3.11.2 -D

配置 webpack-dev-server

1. 修改package.json -> script中的dev命令如下：

"scripts":{
	"dev":"webpack server",  // script 节点下的脚本，可以通过 npm run 执行
}

2. 再次运行npm run dev命令，重新进行项目的打包
3. 在浏览器中访问http://localhost:8080地址，查看自动打包效果

注意：webpack-dev-server会启动一个实时打包的http服务器

3.安装html-webpack-plugin

运行以下命令：

cnpm i html-webpack-plugin@5.3.2 -D

1.在webpack.config.js文件中导入插件

// 1.导入 html-webpack-plugin 这个插件，得到构造函数
const HtmlPlugin = require('html-webpack-plugin')

2.创建实例化对象

const htmlPlugin = new HtmlPlugin({
  // 指定要复制哪个页面
  template: './src/index.html',
  // 指定复制出来的文件名和存放路径
  filename: './index.html'
})

3.在module.exports中加入plugins

module.exports = {
  mode: 'development',// mode 用来指定构建模式，可选值有 development 和 production
  entry: path.join(__dirname, './src/index.js'),
  output: {
    // 存放目录
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  // 3.插件的数组，将来 webpack 在运行时，会加载并调用这些插件
  plugins: [htmlPlugin]
}

webpack中的loader

1.loader概述

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

loader加载器的作用：协助webpack打包处理特定的文件模块。比如：

• css-loader 可以打包处理.css相关的文件
• less-loader 可以打包处理.less相关的文件
• babel-loader 可以打包处理webpack无法处理的高级JS语法

2.打包处理css文件

1. 运行以下代码，安装处理css文件的loader

npm i style-loader@3.0.0 css-loader@5.2.6 -D

2. 在webpack.config.js的module->rules数组中，添加loader规则如下

module: {
    rules: [  // 文件后缀名匹配规则
      { test: /\.css$/, use: ['style-loader', 'css-loader'] }
    ]
  }

其中，test表示匹配的文件类型，use表示对应要调用的loader

注意：

• use数组中指定的loader顺序是固定的
• 多个loader的调用顺序是：从后往前调用

3.打包处理less文件

1. 运行以下代码，安装处理less文件的loader

cnpm i less-loader@10.0.1 less@4.1.1 -D

2. 在webpack.config.js的module->rules数组中，添加loader规则如下

 module: {
    rules: [  // 文件后缀名匹配规则
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
    ]
  }

4.打包处理样式表中与url路径相关的文件

1. 运行以下代码，安装处理有关url的loader

cnpm i url-loader@4.1.1 file-loader@6.2.0 -D

2. 在webpack.config.js的module->rules数组中，添加loader规则如下

module: {
    rules: [  // 文件后缀名匹配规则
      { test: /\.jpg|pbg|gif$/, use: 'url-loader?limit=22229' }
    ]
  }

其中==?之后的是loader的参数项==：

• limit用来指定图片的大小，单位是字节（byte）
• 只有≤limit大小的文件，才会被转为base64格式的图片

5.打包处理js中的高级语法

webpack只能打包处理一部分高级的JavaScript语法。对于那些webpack无法处理的高级js语法，需要借助于babel-loader进行打包处理。

5.1 安装babel-loader相关的包

1. 运行如下命令安装依赖包

cnpm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D

2. 在webpack.config.js的module->rules数组中，添加loader规则如下

{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }

5.2 配置babel-loader

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

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

打包发布

1.配置webpack的打包发布

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

"scripts": {
    "dev": "webpack serve",  // 开发环境中，运行 dev 命令
    "build": "webpack --mode production"  // 项目发布时，运行 build 命令
  }

–mode是一个参数项，用来指定webpack的运行模式。production代表生产环境，会对打包生成的文件进行代码压缩和性能优化。

注意：通过 --mode 指定的参数项，会覆盖webpack.config.js中的mode项

2.把图片文件统一生成到image目录中

修改webpack.config.js中的url-loader配置项，新增outputPath选项即可指定图片文件的输出路径

// 在配置url-loader 的时候，多个参数之间使用 & 符号进行分隔
      { test: /\.jpg|png|gif$/, use: 'url-loader?limit=22229&outputPath=images' }

3. 把JavaScript文件统一生成到js目录中

在webpack.config.js配置文件的output节点中，进行如下的配置：

 output: {
    // 存放目录
    path: path.join(__dirname, 'dist'),
    filename: 'js/bundle.js'
  }

4. 自动清理dist目录下的旧文件

1. 安装清理 dist 目录的 webpack 插件

cnpm i clean-webpack-plugin@3.0.0 -D

2. 按需导入插件、得到插件的构造函数之后，创建插件的实例对象

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const cleanPlugin = new CleanWebpackPlugin()

3. 把创建的 cleanPlugin 插件实例对象，挂载到 plugins 节点中

plugin:[htmlPlugin,cleanPlugin]

Source Map

1.什么是Source Map

Source Map 就是一个信息文件，里面存储着位置信息。也就是说，Source Map 文件中存储着压缩混淆后的代码，所对应的转换前的位置。

有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码，能够极大的方便后期的调试。

2.默认 Source Map 的问题

开发环境下默认生成的Source Map，记录的是生成后的代码的位置。会导致运行时报错的行数与源代码的行数不一致的问题。

3.解决默认 Source Map 的问题

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

module.exports = {
  mode: 'development',// mode 用来指定构建模式，可选值有 development 和 production
  devtool: 'eval-source-map',
  //  其他配置项省略
  }

4.只定位行数不暴露源码

在生产环境下，如果指向定位报错的具体行数，且不想暴露源码。此时可以将devtool的值设置为nosources-source-map。

5.Source Map 的最佳实践

1. 开发环境下：
   • 建议把devtool的值设置为eval-source-map
   • 好处：可以精准定位到具体的错误行
2. 生产环境下：
   • 建议关闭 Source Map会将 devtool 的值设置为nosources-source-map
   • 好处：防止源码泄露，提高网站的安全性