webpack基本使用

一、什么是webpack

概念：webpack是前端项目工程化的具体解决方案

主要功能：它提供了前端模块化开发支持，以及代码压缩混淆、处理浏览器端JavaScript的兼容性、性能优化等强大的功能

好处：让程序猿把工作重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性

注意：目前企业级的前端项目开发中，绝大多数的项目都是基于webpack进行打包构建的

二、创建列表隔行变色项目

0. 新建项目空白目录，并运行 npm init -y 命令，初始化包管理配置文件 package.json
1. 新建src源代码目录
2. 新建 src->index.html 首页和 src -> index.js 脚本
3. 初始化首页基本结构
4. 运行 npm install jquery -S 命令，安装jQuery
5. 通过ES6模块化导入jQuery，实现列表隔行效果

三、在项目中安装webpack

在终端运行下面命令，安装webpack相关的两个包

    npm install webpack@5.5.1 webpack-cli@4.2.0 -D
    npm install webpack webpack-cli -D // 最新版本

四、在项目中配置webpack

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

// 向外导出一个配置对象
module.exports = {
    mode: 'development' // mode 用来指定构建模式，可选值有 development和 production
}

mode的可选值

1.development

开发环境

不会对打包生成的文件进行代码压缩和性能优化

打包速度快，适合在开发阶段使用

2.production

生产环境

会对打包生成的文件进行代码压缩和性能优化

打包速度慢，仅适合在项目发布阶段使用

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

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

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

​

---

​

webpack.config.js文件的使用

• webpack.confg.js是webpack的配置文件。webpack在真正开始打包构建之前，会先读取这个配置文件，从而基于给定的配置，对项目进行打包
• 注意：由于webpack是基于node.js开发出来的打包工具，因此在它的配置文件中，支持使用node.js相关的语法和模块进行webpack的个性化配置

webpack中的默认约定

在webpack中有如下的默认约定：

0. 默认的打包入口文件为 src -> index.js
1. 默认的输出文件路径为 dist -> main.js

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

自定义打包的入口与出口

在webpack.config.js 配置文件中，通过entry节点指定打包的入口。通过output节点指定打包的出口。

示例代码如下：

const Path = require('path')
// 向外导出一个配置对象
module.exports = {
    mode: 'development', // mode 用来指定构建模式，可选值有 development和 production
    // 指定打包的入口
    entry: Path.join(__dirname, './src/index.js'),
    // 指定打包的出口
    outpuut : {
        // 输出文件的存放路径
        path : Path.join(__dirname, './dist'),
        // 输出文件的名称
        filename : 'bundle.js'
    }
}

\