webpack安装与配置

1、安装

在安装之前需要安装node.js

（1）新建项目目录（必须纯英文），并在项目所在终端运行npm init -y命令，初始化包管理配置文件 package.json

（2）新建src源代码目录

（3）新建src->index.html首页和src->index.js脚本文件

（4）初始化首页基本的结构

（5）运行npm install jquery -S命令，安装jQuery

（6）在index.js中通过es6模块化的方式导入jQuery,实现（你需要的效果）列表隔行变色效果 （这个es6语法无法直接兼容，直接引入index.js出现错误）

// 1、使用es6语法，导入jQuery
import $ from 'jquery'

// 2、定义jQuery的入口函数
$(function () {
    // 3.实现奇偶行的变色
    $('li:odd').css('background-color', 'red') //奇数行红色
    $('li:even').css('background-color', 'green')
})

在项目中安装 webpack

在终端运行命令  npm  install  webpack@5.42.1 webpack-cli@4.7.2 -D

2、配置

（1）在项目根目录下，创建名为webpack.config.js的webpack配置文件，并初始化以下的配置

module.exports = {
    mode: 'development' // mode用来构建模式，是开发还是生产
    // 开发 要用development  因为开发追求的是速度，不是体积
    // 上线生产要用productio 因为生产追求的是体积不是速度
}

（2）在papackage.json的script节点下，新增dev脚本如下（dev是自己命名的，命名成dev123,dev666都没有问题）

"scripts": {
    "dev": "webpack"
  },

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

3、基本使用

(1)默认约定打包的入口与出口

默认的打包入口文件为  src->index.js

默认的输出文件路径为    dist->main.js

(2)自定义打包的入口与出口

const path = require('path')

module.exports = {
    mode: 'development', // mode用来构建模式，是开发还是生产
    // 开发 要用development  因为开发追求的是速度，不是体积
    // 上线生产要用productio 因为生产追求的是体积不是速度
    entry: path.join(__dirname, './src/index.js'), //打包入口文件的路径
    // entry 指定处理哪个文件
    // output 指定生成的文件存放到哪里
    output: {
        // 存放到目录
        path: path.join(__dirname, './dist'),
        //    生成的文件名
        filename: 'boundele.js'
    }
}

此时再进行终端上 npm run dev 命令 ，会发现生成的文件名字变化

文件已经打包，需要再html页面中引入boundele.js  不需要引入index.js  

能够发现webpack 生成的boundele.js  已经把浏览器无法兼容的问题解决了

值得注意的是每次修改项目代码，都需要进行项目的打包命令

想要不执行终端打包命令，需要插入插件

最后是项目目录