Webpack基础 day-1

一、什么是 Webpack

Webpack 是一个现代 JavaScript 应用程序的模块打包器。它主要用于将多个 JavaScript 模块打包成一个或多个文件，以便在浏览器中高效地加载和运行。

Webpack 具有以下主要功能：

• 模块加载：Webpack 可以处理各种模块系统，包括 CommonJS、AMD 和 ES6 模块。它可以自动加载模块的依赖项，并将它 们打包到一个文件中。
• 代码转换：Webpack 可以将不同类型的文件（如 JavaScript、CSS、HTML）转换为适合在浏览器中运行的格式。它可以将 ES6 代码转换为 ES5 代码，将 Sass 或 Less 转换为 CSS，将 HTML 模板转换为 JavaScript 模块等。
• 优化：Webpack 可以对打包后的代码进行优化，以提高其性能。它可以通过代码分割、懒加载、Tree Shaking 等技术来减少 JavaScript 文件的大小，并提高应用程序的加载速度。
• 开发服务器：Webpack 内置了一个开发服务器，可以在开发过程中实时编译和预览应用程序。它可以自动刷新浏览器，以便在代码更改时立即看到效果。
• 插件系统：Webpack 具有强大的插件系统，可以扩展其功能。有许多第三方插件可用于处理各种任务，如代码压缩、图像优化、CSS 提取等。

二、打包文件的跟目录结构

文件	作用
node_modules	npm下载的软件包
src	自己编写的代码
package-lock.json	锁定下载软件包的版本
package.json	存放项目的一些信息

三、Webpack 打包

1.Webpack 下载

    #  当前项目中（版本独立），并配置局部自定义命令
    # --save-dev 用于将安装的包添加到项目的开发依赖项中，生产环境不需要的包
    npm i webpack webpack-cli --save-dev

2.下载完成之后需要在 package.json 配置命令

    // 这里的build可以自定义命名
    "build" : "webpack"

3 配置完成的样子

    "scripts": {
        "start": "node server.js",
        "build" : "webpack"
    }

4.运行Webpack对项目进行压缩打包

    # 这里的 build 就是上面我们配置的自定义命令
    npm run build

打包成功之后会在项目根目录生成 dist 目录，此目录里面的内容是我们打包完成之后的项目文件

四、修改 Webpack 打包入口和出口

官方文档

1.在项目根目录创建 webpack.config.js 配置文件

2.导出配置对象，配置入口，出口的文件路径

    const path = require('path');
    module.exports = {
        // entry 配置 webpack 打包入口路径，默认 : ./src/index.js
        entry: './path/to/my/entry/file.js',
        // output 配置 webpack 打包出口路径
        output: {
            // path 文件夹出口，默认 : path.resolve(__dirname, 'dist')
            path: path.resolve(__dirname, 'dist'),
            // filename 文件出口，默认 : main.js
            filename: 'my-first-webpack.bundle.js',
            // 在打包时可以清空上一次的内容 注：只有在 webpack 5.20.0 版本以上才可以使用
            clean : true
        },
    };

3.编写完成之后可以重新打包看效果啦

注：只有和入口产生直接/间接的引入关系，才会被打包