初识webpack

2022/9/1 6:53:13

本文主要是介绍初识webpack，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1.什么是webpack?

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

主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端JavaScript的兼容性（根据配置，来兼容不同的浏览器版本）、性能优化等强大的功能

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

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

2.创建列表隔行变色项目

创建项目空白目录，并运行 npm init -y 命令，初始化包管理配置文件 package.json
新建scr源代码目录
新建src -> index.html 首页和 src -> index.js 脚本文件

初始化首页基本的结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./index.js"></script>
</head>
<body>
    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
        <li>这是第6个li</li>
        <li>这是第7个li</li>
        <li>这是第8个li</li>
        <li>这是第9个li</li>
    </ul>
</body>
</html>

//1.使用ES6导入语法，导入JQuery
import $ from 'jquery'

//2.定义jQuery的入口函数
$(function () {
    //3.实现奇偶行变色
    //奇数行为红色
    $('li:odd').css('background-color','red')
    $('li:even').css('background-color','pink')
  })

运行 npm install jquery -S 命令(全写方式： npm install jquery --save，安装jQuery
通过 ES6-模块化方式导入jQuery，实现列表隔行变色效果

3.在项目中安装webpack，解决import $ from 'jquery'兼容性问题

　在终端运行如下命令，安装webpack相关的两个包：

npm install webpack@5.42.1 webpack-cli@ -D

-D 的意思是把下边两个包装到，package.json中 devDependencies目录下，是--save-dev的缩写

4.在项目中配置webpack

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

//使用 node.js中的导出语法，向外导出一个 webpack的配置对象
module.exports = {
    //代表 webpack 运行的模式，可选值有两个 development和production
    mode:'production'
}

在package.json中配置启动脚本

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

mode的可选值　，mode的可选值有两个，分别是

development
1. 　　开发环境
2. 不会对打包生成的文件进行代码压缩和性能压缩
3. 打包速度快，适合在开发阶段使用
production
1. 生产环境
2. 会对打包生成的文件进行代码压缩和性能优化
3. 打包速度很慢，仅适合在项目发布阶段使用

webpack.config.js是webpack的配置文件

　　webpack在真正开始打包构建之前，会先读取这个配置文件，从而基于给定的配置，对项目进行打包。
注意：由于webpack是基于node.js开发处理的打包工具，因此在他的配置文件中，支持使用node.js相关的语法和模块进行webpack的个性化配置

webpac的默认约定
1. 　　在webpack4.X和5.X的版本中，有如下的默认约定
  1. 在默认的打包入口文件为src ->index.js
  2. 默认的输出文件路径为dist->main.js
2. 注意：可以在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的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

初识webpack

相关编程文章