代码存在兼容性问题用webpack 打包

新建一个空的文件夹，在文件夹地址栏输入 cmd 打开终端 输入 npm init -y 这就创建了一个 package.json

使用 visual studio 打开 change-rows-color 这个文件夹，并新建 src 文件夹，在 src 文件夹下新建 index.html , index.js

在index.html 中创建九个列

ul>li{ 这是第 $ 个 li}*9 按 Tab 自动补全

 安装 jquery 

在文件夹 输入 cmd 进入终端 ，输入 npm i jquery -S

 在 index.js 中导入 jquery 新建函数

// 使用 es6 导入 jquery
import $ from 'jquery'
// 定义 jquery 函数
$(function () {
    // 实现奇偶行变色
    $('li:odd').css('background-color','red')
    $('li:even').css('background-color','blue')
})

在 index.html 中引入 index.js ,打开浏览器，发现页面样式并没有生效，并报错，这是因为浏览器对 es6 的不兼容。

解决：需要安装 webpack 两个包 npm install webpack@5.5.1 webpack-cli@4.2.0 -D

1.在根目录中创建 wepack.config.js 的 webpack 配置文件，初始化如下配置

module.exports = {
    mode: 'development'  // mode用来指定构建模式。可选值有 development和 production
}

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

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

script 节点下的脚本，可以通过 npm run 执行。例如 npm run dev。

webpack 默认的打包入口文件为src-> index.js    默认的输出文件路径为dist->main.js 。如果要自定义打包的入口与出口，在webpack.config.js配置文件中，通过entry 节点指定打包的入口。通过output节点指定打包的出口。如下：（webpack 自动打包第三方常用的插件 webpack-dev-server （实时打包的文件存在内存中，不在可见的物理磁盘）、html-webpack-plugin ）

// 导入一个 node 中的 包，用来打包自定义路径用
const path = require('path')
module.exports = {
    mode: 'development' , // mode用来指定构建模式。可选值有 development和 production
    // 指定打包的入口
    entry:path.join(__dirname, './src/index.js'),
    // 指定打包的出口
    output:{
        // 表示输出文件的存放路径
        path:path.join(__dirname,'./dist'),
        // 表示输出文件的名称
        filename:'bundle.js'
    }
}

3.在终端中运行npm run dev 命令，启动webpack进行项目的打包构建。

新生成了一个 dist 文件夹，里面包含了一个 main.js 文件。如图

 4.把原来 index.html 中引入的 index.js 改为 dist 下的 main.js 

<script src="../dist/main.js"></script>

打开index.html