1.webpack创建项目

最新推荐文章于 2024-07-22 10:39:47 发布

爱JAVA的少年闰土

最新推荐文章于 2024-07-22 10:39:47 发布

阅读量434

点赞数 1

分类专栏： VUE 文章标签：前端 vue

本文链接：https://blog.csdn.net/pengjinlong521/article/details/129274551

版权

VUE 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Webpack一步步建立一个前端项目，通过Webpack理解前端开发的系统化和规范化。文中详细讲解了从初始化项目、创建HTML和JS文件、引入jQuery、安装和配置Webpack，到构建项目并实现jQuery隔行换色功能的过程。同时，提到了Webpack的开发和生产模式的差异，以及不同版本Webpack的默认配置和自定义配置方法。

摘要由CSDN通过智能技术生成

简介

我们通过简单的使用 webpack 一步一步的实现搭建一个完整的项目，逐步理解前端的开发不再是简单的 html +css + javascript 脚本，而是系统的，架构的开发模式；就跟后端开发一样，开始规范化了；后面很多地方都可以对比后端的开发模式，你会发现有很多类似的地方！Webpack 是一个前端资源加载/打包工具；它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源；官网地址：https://webpack.docschina.org/；本章我们将通过使用 webpack 搭建一个简单的项目，实现一个页面，并使用 jQuery 实现隔行换色的功能

实现步骤

1. 手动创建一个空文件夹 vue-1；然后 cmd 命令打开终端，cd 命令到vue-1 目录，执行命令如下初始化该文件夹

cnpm init -y

在这里插入图片描述

当命令执行完毕后，发现在 vue-1 文件夹下生成了 package.json 文件，打开后可以看到如下配置信息；可以手动修改配置一下里面的信息即可

在这里插入图片描述

2. 在 vue-1 文件夹下新建 src 文件夹，并在 src 文件夹下创建 index.html, index.js 两个文件；在 index.html 中添加如下代码

<!DOCTYPE html>
<html>
    <head>
        <title>隔行换色功能</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <ul>
            <li>这是第 1 行</li>
            <li>这是第 2 行</li>
            <li>这是第 3 行</li>
            <li>这是第 4 行</li>
            <li>这是第 5 行</li>
        </ul>
    </body>
</html>

在 index.js 中添加如下代码：

// 引入 JQuery 依赖
import $ from 'jquery';
// 换色功能实现
$(function() {
    // 基数行设置为红色
    $('li:odd').css('background-color', 'red');
    // 偶数行设置为绿色
    $('li:even').css('background-color', 'green');
});

3. 这里要使用 JQuery，所以要引入 JQuery 依赖，执行命令

cnpm install jquery -S

在这里插入图片描述
执行完毕后，vue-1 文件夹下会新建 node_modules 文件夹，里面就是我们安装的 jQuery 依赖

打开 package.json 文件，发现多了如下内容

4. 此时，项目还不能访问，即使在 index.html 中引入 index.js 直接访问也会报错

在这里插入图片描述
我们需要构建完整个项目才行！

5. 安装 webpack 依赖，执行命令

cnpm install webpack@5.42.1 webpack-cli@4.9.1 -D

在这里插入图片描述
安装完毕后，在 package.json 文件中发现自动添加了如下信息

6. 安装完毕后，在 vue-1目录下创建 webpack.config.js 配置文件，添加对 webpack 的配置信息

module.exports = {
    // 指定 webpack 运行模式； mode 用来指定构建模式
    // 可选值为: development(开发环境)和production(生产环境)
    mode: 'development' 
}

7. 在 package.json 的 scripts 节点下，添加 dev 脚本，如下：

{
    "name": "vue-1",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
        "jquery": "^3.6.0"
    },
    "devDependencies": {
        "webpack": "^5.42.1",
        "webpack-cli": "^4.9.1"
    }
}

scripts 节点下的配置可以通过命令 cnpm run 启动！

8. 执行命令构建项目

cnpm run dev

在这里插入图片描述
看到上面的信息，就表示打包成功！这时在 vue-1 目录下生成了 dist 文件夹，里面有一个 main.js 文件

9. 在 index.html 文件中将 main.js 引入，然后访问 index.html，得到如下效果

在这里插入图片描述
补充
1）上面的 install xxx -S 和 install xxx -D 这两个命令的区别是：-S 表示写入到 package.json 下的 dependencies；表示开发，上线都需要的依赖；-D 表示写入到 package.json 下的 devDependencies；表示开发需要，上线不需要的依赖；也可以替换 -D为 --save-dev，效果相同

2）在 webpack.config.js 中的配置，当指定 mode = development(开发模式), 打包后的 main.js 没有被压缩(324KB)，而且包含注释，打包时间快，适合开发阶段；当指定为 production(生产模式) 后，main.js 会被压缩(89KB) 并去掉了注释；打包时间长，适合上线部署

3）webpack4.x，5.x的版本中，有默认约定：默认打包入口文件为 src -> index.js，默认输出文件路径为 dist -> main.js；可以在 webpack.config.js 中修改打包的默认约定；在 entry 节点指定打包的入口，通过 output 节点指定打包的出口；例如：

const path = require('path');
module.exports = {
    // 指定 webpack 运行模式; mode 用来指定构建模式, 可选值为: development(开发环境)和production(生产环境)
    mode: 'development', 
    // 指定要处理哪个文件; __dirname(注意: 前面是两个横线)表示 webpack.config.js 所在目录
    entry: path.join(__dirname, './src/index.js'), 
    // 指定生成文件(例如: main.js), 放入到哪个目录下
    output: { 
        path: path.join(__dirname, './dist'),
        filename: 'main.js'
    } 
}

爱JAVA的少年闰土

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
1.webpack创建项目

我们通过简单的使用 webpack 一步一步的实现搭建一个完整的项目，逐步理解前端的开发不再是简单的 html +css + javascript 脚本，而是系统的，架构的开发模式；就跟后端开发一样，开始规范化了；后面很多地方都可以对比后端的开发模式，你会发现有很多类似的地方！Webpack 是一个前端资源加载/打包工具；它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源；官网地址：https://webpack.docschina.org/；
复制链接

扫一扫

专栏目录