vue ---- 工程化概念、webpack概念、webpack的安装配置，以及简单使用

引入jQuery，并使用他操作dom元素

index.js
//1. 使用 ES6 中的高级语法， 导入一个jQuery
import $ from 'jquery'//2. 定义 jQuery的入口函数
$(function() {//实现奇偶行变色//奇数行为红色$('li:odd').css('background-color','red')$('li:even').css('background-color','pink')
})

index.html
<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>//引入js文件<script src="./index.js"></script>
</head>

未实现效果

在项目中安装webpack

npm install webpack@5.42.1 webpack-cli@4.7.2 -D
-D == --save-dev

在项目中配置webpack

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

development : 开发时使用，因为打包速度快，体积大
production: 发布上线时使用，上线追求的是体积小，速度快！

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

在package.json 的 scripts节点下，新增dev脚本

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

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

生成一个资源文件main.js，包含index.js以及jQuery的代码

替换掉index.html中引入的index.js

<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> --><script src="../dist/main.js"></script>
</head>

webpack 的说明

webpack 中的默认约定
在webpack 4.x 和 5.x 的版本中，有如下的默认约定：
① 默认的打包入口文件为 src -> index.js
② 默认的输出文件路径为 dist -> main.js

注意：可以在webpack.config.js中修改打包的默认约定

修改默认约定

在npm run dev的时候，webpack 首先会去读取 webpack.conifg.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' //输出文件的名称}
}