webpack基本用法

什么是webpack？

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

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

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

注意：目前Vue，react等前端项目，基本都是基于webpack进行工程化开发的。

webpack 示例

我们通过一个demo来演示webpack的使用过程

我么先创建一个文件夹，初始化项目文件

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

 

 下面我们在在html里面引入index.js 在浏览器运行

 我们发现在浏览器控制台中可以看到报错了

这是浏览器不支持ES6里面的import语法，因为使用了高级语法浏览器不兼容，所以浏览报错。

现在我们知道了报错原因，我么来解决它。上面我们说过webpack可以处理浏览器中JavaScript的兼容性，我们就使用一下webpack来解决。

安装webpack

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

npm install webpack@5.42.1 webpack-cli@4.7.2 -D 

在项目中配置 webpack

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

// 使用Node.js的导出语法，向外导出一个webpack配置对象
module.exports = {
    // 代表webpack的开发模式，有两个值development和production。development代表开发模式；development代表生产模式，能够对代码进行压缩
    mode: "development"
}

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

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

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

 我们可以看到在运行成功之后，在目录中多出了一个dist文件，这个文件就是webpack帮我们打包的文件。

 我么将打包后的js脚本，引入到html文件里面 ，现在我们发现功能就实现了，报错也没有了。

 

webpack的基本使用 

mode的可选值

mode 节点的可选值有两个，分别是：

① development （ 开发环境 ）不会对打包生成的文件进行代码压缩和性能优化

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

② production （ 生产环境 ）会对打包生成的文件进行代码压缩和性能优化

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

webpack.config.js 文件的作用

webpack.config.js 是 webpack 的配置文件。webpack 在真正开始打包构建之前，会先读取这个配置文件， 从而基于给定的配置，对项目进行打包。

注意：由于 webpack 是基于 node.js 开发出来的打包工具，因此在它的配置文件中，支持使用 node.js 相关 的语法和模块进行 webpack 的个性化配置。

webpack 中的默认约定

在 webpack 4.x 和 5.x 的版本中，有如下的默认约定：

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

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

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

可以参考以下代码修改

// 引入path模块
const path = require('path')

// 使用Node.js的导出语法，向外导出一个webpack配置对象
module.exports = {
    // 代表webpack的开发模式，有两个值development和production。development代表开发模式；development代表生产模式，能够对代码进行压缩
    mode: "development",

    // entry 要处理的哪个文件
    entry:  path.join(__dirname, './src/index.js'),

    // 指定生成的文件要存放在哪里
    output: {
        // 存放的目录
        path: path.join(__dirname, 'dist'),
        // 生成的文件名
        filename: 'main.js'
    }
}