前端学习笔记|5.0 Vue中使用webpack javascript|webpack|vue.js

文章目录

- webpack的基本使用
- webpack中的插件
- webpack打包发布
- Source Map
- 注意：在实际开发中我们并不需要自己配置 webpack
- webpack中@的用法
- 在Chrome浏览器中安装vue_devtools调试工具

webpack的基本使用

1，什么是webpack？

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

2，安装webpack

npm install webpack@5.42.1 webpack-cli@4.7.2 -D

3，在项目中配置webpack

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

// 使用Node.js中的导出语法，向外导出一个webpack的配置对象 module.exports = { //mode 用来指定构建模式，可选值有 development 和 production // 开发时使用 development 打包速度快，体积大 // 上线的时候使用 production 打包速度快，体积小 mode: 'development', };

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

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

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

文章图片

运行之后会在项目中自动生成一个dist文件，我们后续只需要导入dist文件下的main.js文件即可

文章图片

4，自定义打包的入口与出口

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

const path = require('path'); // 使用Node.js中的导出语法，向外导出一个webpack的配置对象 module.exports = { //mode 用来指定构建模式，可选值有 development 和 production mode: 'development', // entry:'指定要处理那个文件' entry: path.join(__dirname, './src/index.js'), // output 指定生成的文件存放在哪里 output: { // 存放目录 path: path.join(__dirname, 'dist'), // 生成的文件名 filename: 'main.js', }, };

webpack中的插件

1，webpack插件的作用

常用插件：

webpack-dev-server
- 类似于 node.js 的nodemon工具
- 每当修改了源代码，webpack会自动进行项目的打包和构建
html-webpack-plugin
- webpack中的HTML插件 (类似于一共模板引擎插件)
- 可以通过此插件自定制 index.html 页面的内容

2，安装配置 webpack-dev-server

安装：
运行命令安装插件：npm install webpack-dev-server -D
webpack 4 以上我们还需要安装webpack-cli
npm install webpack-cli -D
配置：
① 新增 webpack.config.js 中的 devServer命令：

// 监听文件改动，自动打包//watch: true, devServer: { static: path.join(__dirname, './'), // 指定发布后的映射的路径，./代表映射当前路劲 compress: true, // 压缩资源 port: 9000, // 指定服务器的端口号 open: 'Chrome', // 指定以哪个浏览器打开，open:true 代表以默认浏览器打开 }

webpack版本4以上的在package.json内配置如下

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

② 再次运行 npm run dev 命令，重新进行项目的打包
③ 在浏览器中访问 http://localhost:8080 地址查看自动打包效果
修改引入文件

文章图片

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

3，安装 html-webpack-plugin

安装：
npm install html-webpack-plugin -D
配置：
① webpack.config.js文件中新增配置如下代码

const HtmlPlugin = require('html-webpack-plugin'); // 导入html-webpack-plugin 插件，得到插件的构造函数 // nwe 构造函数，创建插件的示例对象 const htmlPlugin = new HtmlPlugin({ template: './src/index.html', //指定要复制那个页面 filename: './index.html', //指定复制出来的文件名和存放路径 });

② webpack.config.js文件module.exports中新增

module.exports = { // 插件的数组，将来webpack在运行时，会被加载并调用这些插件 plugins: [htmlPlugin], }

4，webpack 中的loader插件

在实际开发过程中，webpack默认只能打包处理以.js后缀名结尾的模块。其他非.js后缀名结尾的模块,webpack 默认处理不了，需要调用loader 加载器才可以正常打包，否则会报错!
loader加载器的作用:协助webpack 打包处理特定的文件模块。比如:

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

文章图片

Ⅰ，安装打包处理css文件
① 运行 npm i style-loader -D和npm i css-loader -D，安装处理css文件的loader
② 在wenpack.config.js的module -> rules数组中，添加loader规则如下

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

其中，test表示匹配的文件类型，use表示对应要调用的loader，顺序是固定的，多个loader的调用顺序是：从后往前调用。
Ⅱ，安装打包处理less文件
① 运行 npm i less-loader less -D命令
② 在webpack.config.js的 module ->rules数组中，添加loader规则如下：

module:{ rules:[ {test:/\.less$/,use:['style-loader','css-loader','less-loader']} ] }

Ⅲ，安装打包处理样式表中url路径相关的文件
① 运行 npm i url-loader file-loader -D 命令
② 在webpack.config.js 的module ->rules 数组中，添加 loader规则如下：

module: { // 所有第三方文件模块的匹配规则 rules: [ // 文件后缀名的匹配规则 { test: /\.jpg|png|gif$/, use: 'url-loader?limit=22229' }], },

其中？之后的loader的参数项：limit用来指定图片的大小，单位是字节(byte)，只有<= limit大小的图片，才会被转化为base64格式的图片
Ⅳ，打包处理js文件中的高级语法
webpack 只能打包处理一部分高级的JavaScript语法。对于那些webpack无法处理的高级JS语法，需要借助于 babel-loader进行打包处理。例如：

文章图片

安装：npm i babel-loader @babel/core @babel/plugin-proposal-decorators -D
配置：
① 在 webpack.config.js的module ->rules 数组中，添加loader规则如下：

// 注意：必须使用exclude 指定特殊项，因为 node_modules 目录下的第三方包不需要被打包 {test:/\.js$/,use:'babel-loader',exclude:'/node_modules/'}

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

module.exports={ // 声明 babel 可用的插件 plugins:[['@babel/plugin-proposal-decorators',{legacy:true}]] }

详情请参考Babel的官网
webpack打包发布

配置webpack的打包发布

【前端学习笔记|5.0 Vue中使用webpack】在package.json文件的，scripts节点下，新增build命令如下：

"scripts":{ "build":"webpack --mode production"//项目发布时，运行build命令 }

–mode 是一个参数项，用来指定webpack 的运行模式。production代表生产环境，进行代码压缩和性能优化。
注意：通过 --mode 指定的参数项，会覆盖 webpack.config.js 中的model 选项。

优化dist文件夹打包

① 吧JavaScript 文件统一生成到JS目录中
在webpack.config.js 配置文件的output节点中，进行如下的配置：

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

② 吧图片文件统一生成到 image 目录中
修改webpack.config.js中的module ->rules配置项，修改指定图片文件的输出路径：

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

③ 运行build命令时自动删除旧的dist文件夹
安装：npm install --save-dev clean-webpack-plugin
配置：在webpack.config.js文件中，新增

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

修改plugins数组内容 plugins: [htmlPlugin, new CleanWebpackPlugin()],
Source Map

1，什么是Source Map

Source Map 就是一个信息文件，里面储存着位置信息，也就是说，Source Map文件中存储着压缩混淆后的代码，所对应的转换前的位置。
作用：出错的时候，除错工具将直接显示原始代码，而部署转换后的代码，能够极大的方便后期的调试。
开发环境下默认生成的Source Map，记录的是生成后的代码的位置。会导致运行时报错的行数，与源代码的行数不一致的问题，示意图如下：