Vue
webpack入门
03-31 09:23本文通过案例来讲解说明webpack的安装和使用方法。
安装webpack
首先新建空白项目（文件夹），在命令行中运行下面的命令，初始化包管理配置文件package.json
npm init -y
安装webpack（版本号非必须）
npm i webpack@5.98.0 webpack-cli@6.0.1 -D
-D (--save-dev)：用于将包添加到项目的 devDependencies，表示这是在开发阶段所需的依赖，例如测试工具、构建工具等。
-S (--save)：用于将包添加到项目的 dependencies，表示这是在生产环境中运行时所需的依赖。
webpack是开发阶段使用的工具，上线后不再使用，所以安装时，携带参数-D，表示装到开发依赖节点下。
安装时如果不携带版本号，默认安装最新版本。
创建webpack配置文件
在项目根目录中创建webpack的配置文件，名为webpack.config.js，在配置文件中可以声明一些webpack的基本配置项。
配置文件使用CommonJS的语法，通过module.export方式向外导出一个对象。
webpack在真正开始打包构建前，会先读取这个配置文件（导出的对象），从而基于给定的配置，对项目进行打包和构建。
注意：由于webpack是基于node.js开发出来的打包工具，因此在它的配置文件中，支持使用node.js相关的语法和模块进行webapck的个性化配置。
module.exports = {
//mode有两个节点可选，分别是 development 和 production
//development 表示开发环境，不会对打包的文件进行代码压缩和性能优化，打包速度更快，适合在开发阶段使用
//production 表示生产环境，会对打包的文件进行代码压缩和性能优化，打包速度很慢，仅适合在项目发布阶段使用
mode: 'development' //开发模式
}
对比model两种模式打包生成文件的大小和所用时间
webpack中的默认约定
在webpack中，有如下默认约定：
1、默认的打包入口文件为：src/index.js
2、默认的输出文件路径为：dist/main.js
可以在webpack.config.js中修改打包的默认约定，通过entry节点指定打包的入口，通过output节点指定打包的出口
此时运行npm run dev，打包生成的文件为/dist/bundle.js
结合上面的配置，如下：
module.exports = {
//mode有两个节点可选，分别是 development 和production
//development 表示开发环境，不会对打包的文件进行代码压缩和性能优化，打包速度更快，适合在开发阶段使用
//production 表示生产环境，会对打包的文件进行代码压缩和性能优化，打包速度很慢，仅适合在项目发布阶段使用
mode: 'development', //开发模式
//webpack默认约定：默认的打包入口文件为/src/index.js，默认的输出文件为/dist/main.js
//可通过下面的配置修改打包的默认约定
entry: path.join(__dirname, './src/index.js'), //打包入口文件路径
output: {
path: path.join(__dirname, './dist/'), //输出文件的存放路径
filename: 'build.js' //输出文件的名称
}
}
配置package.json
package.json 是一个位于 JavaScript 项目的根目录中的文件，用于定义项目的各种元数据。这些元数据包括项目名称、版本、描述、作者、依赖项以及脚本命令等。它是 Node.js 和 npm（Node Package Manager）项目的核心配置文件。
在 Vue 项目中，package.json 的作用：
- 依赖管理：定义项目所需的第三方库和工具，这些依赖项可以通过 npm 自动安装和管理。
- 脚本命令：提供了一种便捷的方式来定义和运行常用的开发任务，如启动开发服务器、构建项目、运行测试等。
- 项目信息：包含项目的基本信息，如名称、版本、作者等，有助于团队协作和项目管理。
- 版本控制：通过语义化版本控制，确保项目在不同环境下的稳定性和一致性。
打开webpack的包管理配置文件package.json，设置可以通过 npm run ... 的方式运行脚本的命令：
在package.json文件中，找到 scripts 配置项，里面配置了可运行的脚本，前面key键任意取，表示脚本的名字，后面的value为固定值，表示运行脚本时执行的命令
比如：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack" //script节点下的脚本，可以通过npm run执行
},
其中的dev，表示启动webpack进行项目的打包构建，运行命令为：
npm run dev
运行上面的命令，即可对象项目进行打包，打包结束后，可以看到在项目根目录中多了一个dist文件夹，里面多一个main.js，这就是webpack打包生成的文件，在创建的html中引入此js文件即可。
隔行变色demo
在根目录下新建src源代码目录，在其中新建 index.html 和 index.js 文件，初始化首页 index.html 内的HTML基本结构
安装jQuery，命令
npm install jquery -S
-S (--save)：用于将包添加到项目的 dependencies，表示这是在生产环境中运行时所需的依赖。
使用ES6模块化的方式导入jquery
import $ from 'jquery'
实现隔行变色的效果
$(function() {
$("li:odd").css("backgroundColor", "#eee") //奇数行
$("li:even").css("backgroundColor", "#fff") //偶数行
})
打包项目
npm run dev
打包结束后，可以看到在项目根目录中多了一个dist文件夹，里面多一个main.js，这就是webpack打包生成的文件，在创建的html中引入此js文件即可
- 0
- 0
- 0
- 0
- 0
- 0
