Webpack学习笔记

最新推荐文章于 2024-07-24 16:02:15 发布

嘿，程序猿

最新推荐文章于 2024-07-24 16:02:15 发布

阅读量269

点赞数 2

分类专栏： Vue学习笔记文章标签： webpack 学习 javascript

本文链接：https://blog.csdn.net/qq_52289068/article/details/126624769

版权

Vue学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

- - Webpack 学习笔记

Webpack 学习笔记

前端开发工程化：模块化、组件化、规范化、自动化

目前主流的前端工程化解决方案：webpack

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

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

一、Webpack基本使用

1、新建目录步骤

1.1、新建项目空白目录，并运行以下命令，初始化包管理配置文件 package.json

npm init -y

1.2、新建 src 源代码目录

1.3、新建src -> index.html 首页和 src -> index.js 脚本文件

1.4、运行以下命令，安装jQuery

npm install jquery -S
// --save

1.5、通过 ES6 模块化的方式导入 JQuery

在 index.js 文件夹内：

// 使用 ES6 语法导入 JQuery
import $ from 'jquery'
// 这里如果不使用 webpack 会出现兼容性问题

// 定义jQuery的入口函数
$(function() {
  
})

2、安装和配置 webpack

2.1 在终端运行以下命令

npm install webpack@5.42.1 webpack-cli@4.7.2 -D
// -D 是 --save-dev

在这里插入图片描述

devDependencies：开发需要用、部署不需要用到的包放这

2.2 在项目中配置webpack

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

// 使用 Node.js 中的导出语法，向外导出一个 webpack 配置对象
module.exports = {
	mode:'development'  //mode 用来指定构建模式，可选值有 development 和 production   生产和发布
}

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

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

3、在终端中运行如下命令，启动webpack 进行项目的打包构建

npm run dev

4、然后把编译生成的 dist -> man.js 文件引入 index.html 中即可解除浏览器兼容性问题

在这里插入图片描述

二、webpack基本认识

1、webpack 中的默认约定

在这里插入图片描述

2、自定义打包的入口与出口

//entry : '指定要处理哪个文件'
  emtry: path.join(__dirname, './src/index1.js'),
  output: {
    // 存放到目录
    path: path.join(__dirname, './dist'),
    filename: 'bundle.js'
  }

在这里插入图片描述

因为每次改动代码，页面样式并不会变，要重新run 一下生成新的main.js 文件才可以，太麻烦，要怎么办呢？

3、webpack 中的插件

在这里插入图片描述

命令：

npm install webpack-dev-server -D

3.1 配置 webpack-dev-server

作用：自动打包，不用每次都 run 一下

1、修改 package.json -> 中的 dev 命令如下：
"scripts": {
	"dev":"webpack serve" ,  // script 节点下的脚本，可以通过 npm run 执行
}
2、再次运行npm run dev 命令，重新进行项目打包

3、在浏览器中访问 http://localhost:8080/，查看自动打包效果

3.2 安装 html-webpack-plugin

作用：将页面复制到根目录，然后输入地址，相当于直接进入到了主页

npm install html-webpack-plugin -D

1、配置

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

// 使用 Node.js 中的导出语法，向外导出一个 webpack 配置对象
module.exports = {
  //mode 用来指定构建模式，可选值有 development 和 production   生产和发布
  mode: 'development', 
  
  // 3、插件的数组，将来 webpack 在运行时，会加载并调用这些插件
  Plugin: [htmlPlugin]

}

3.3 devServer 节点

作用：运行完直接打开浏览器，不用每次都输入地址

devServer: {
    open: true,      // 首次打包成功后自动打开浏览器
    host: '127.0.0.1',
    port: 80,
}

4、loader 加载器

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

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

css-loader

less-loader

babel-loader

1、运行命令，安装处理 css 文件的 loader

npm i style-loader css-loader -D

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

module: {
    rules: [
      // 定义了不同模块对应的 loader
      {test:/\.css$/,use:['style-loader','css-loader']}
    ]
  }

安装处理 less 文件的loader 也是类似的

npm i less-loader less -D

module: {
    rules: [
      // 定义了不同模块对应的 loader
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
      { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }
    ]
  }

5、logo 转化为 base64 格式

防止频繁的发起网络请求，但是转成 base64 字符串后体积会变大一点，所以不建议将大图片转化成 base64 格式

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

1、运行以下命令
npm i url-loader file-loader -D
2、在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：
 // 处理图片文件的 loader
{ test: /\.jpg|png|gif$/, use: 'url-loader?limit = 222229' }
limit 参数的作用：用来指定图片的大小，单位是字节。只有小于等于这个数的，才能被转为 base64 格式的图片

7、打包处理 js 文件中的高级语法

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

解决方法：安装 babel-loader 相关的包
npm i babel-loader @babel/core @babel/plugin-proposal-decorators -D
2、在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：
// 使用 babel-loader 处理高级的 JS 语法,exclude 意思是排除项,排除第三方包，它的兼容性不需要程序员关心
{ test:/.\js$/,use: 'babel-loader',exclude: /node_modules/}
配置 babel-loader

在项目根目录下，创建名为 babel.config.js 的配置文件，定义 Babel 的配置项如下：
module.exports = {
  // 声明 babel 可用的插件
  // 将来 webpack 在调用 babel-loader 的时候，会先加载 plugins 插件来使用
  plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]]
}