2024-05-08发表2025-03-15更新VUE

VUE前端工程化-2

webpack的概念

webpack是一个流行的前端项目构建工具，可以解决目前web开发的困境。
webpack提供了模块化支持，代码压缩混淆，解决js兼容问题，性能优化等特性，提高了开发效率和项目的可维护性

webpack的基本使用

创建项目目录并初始化，初始化包管理配置文件package.json
npm init -y
新建src源代码目录
新建src->index.html首页
初始化首页基本结构
运行npm install jquery -S安装JQuery
通过模块化的形式，实现列表隔行变色

index.html文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="./index.js"></script>
  </head>
  <body>
    <input type="text" placeholder="ceshi" />
    <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>

index.js文件

import $ from "jquery"
$(function(){
    $("li:odd").css("backgroundColor","pink");
    $("li:even").css("backgroundColor","lightblue");
})

这种写法有问题，因为index.js文件中使用了import，这属于ES6的语法了，浏览器不兼容，所以需要使用webPack来打包

安装和配置WebPack

运行npm install webpack webpack-cli -D安装webpack相关的包
在根目录中，创建名为webpack.config.js的webpack配置文件
在webpack.config.js配置文件中，初始化如下基本配置

1
2
3

module.exports={
    mode:'development'//mode用来指定构建模式，这是开发模式，生产模式为production
}

在package.json配置文件中的scripts节点下，新增dev脚本

1
2
3

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

在终端运行npm run dev，启动webpack进行项目打包

在运行完以上步骤后，会自动生成一个dist目录，且在dist目录中生成main.js文件，在index.html中更改<script src="../dist/main.js"></script>

配置打包的入口与出口

webpack的4.0版本默认约定：

打包的入口文件为src->index.js
打包的输出文件为src->main.js

如果要自定义打包的入口和出口，则需要更改webpack.config.js中的配置信息

const path = require("path") //导入node.js中专门操作路径的模块
module.exports = {
    entry:path.join(__dirname,"./src/index.js"),//打包入口文件的路径 __dirname是该文件的当前目录
    output:{
        path:path.join(__dirname,"./dist"),//输出文件的存放路径
        filename:"boundle.js" //输出文件的名称
    }
}

配置webpack自动打包

为什么要自动打包？如果修改某些js文件进行保存不会热重载，需要手动执行npm run dev

安装自动打包工具npm install webpack-dev-server -D
修改package.json ->scripts中的dev命令：

1
2
3

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

将src->index.html中script节点下的脚本路径修改为路径/boundle.js，因为自动打包会将生成的js文件托管到根目录下（在内存中），至于是哪个路径，默认http://localhost:8080/
运行npm run dev重新打包

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

webpack-dev-server 打包生成的输出文件，默认放到项目根目录，而且是虚拟的在项目中看不到

生成预览界面

设置访问路径打开默认的界面

运行npm install html-webpack-plugin -D命令，安装生成预览页面的插件
修改webpack.config.js文件头部区域，添加如下内容

//导入生成预览页面的插件，得到一个构造函数
const HtmlWebpackPlugin = require("html-webpack-plugin");
const htmlPlugin = new HtmlWebpackPlugin({ //创建插件的实例对象
    template:"./src/index.html",//设定作为默认页面的文件
    filename:"index.html" //指定生成文件的名称，存储于内存中，在目录中不显示
});

修改webpack.config.js文件中向外暴露的插件配置对象

1
2
3

module.exports ={
    plugins:[htmlPlugin] //plugin数组是webpack打包期会用到的插件
}

在终端运行npm run dev，启动webpack进行项目打包

配置自动打包相关的参数

上面使用webpack自动打包完成后，需要手动在浏览器中输入网址，自动打开浏览器的设置如下：

//package.json中的配置

//--open 打包完成后自动打开浏览器
//--host 配置IP地址
//--port 配置端口
"scripts":{
    "dev":"webpack-dev-server --open --host 127.0.0.1 --port 8888"
}

VUE前端工程化-2

https://bubuweiying.site/VUE前端工程化-2/

作者

步步为营

发布于

2024-05-08

更新于

2025-03-15

许可协议

#VUE

VUE前端工程化-2

webpack的概念

webpack的基本使用

安装和配置WebPack

配置打包的入口与出口

配置webpack自动打包

生成预览界面

配置自动打包相关的参数

作者

发布于

更新于

许可协议

喜欢这篇文章？打赏一下作者吧

分类

链接

标签

目录

最新文章