Webpack基础 day-1

发布时间:2024年01月22日

一、什么是 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_modulesnpm下载的软件包
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.编写完成之后可以重新打包看效果啦

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

文章来源:https://blog.csdn.net/weixin_63309304/article/details/135728305
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。