构建工具vite/webpack

简介: 构建工具vite/webpack

一、vite

快速开始

  1. 全局安装vite npm i -g vite
  2. 创建vite npm create vite
  3. 安装依赖 npm i
  4. 运行项目 npm run dev

二、webpack

1、使用步骤

  1. 初始化项目npm init -y
  2. 安装依赖webpackwebpack-cli
  3. 在项目中创建src目录,然后编写代码(默认主文件index.js)
  4. 执行npm webpack来对代码进行打包(打包后观察dist目录)

cli: command line interface 命令行工具

安装依赖npm add -D webpack webpack-cli, -d表示设置为开发依赖

src 目录下的是遵循前端开发规范的,src 以外的要用node规范CommonJS

2、配置文件(webpack.config.js)

const path = require("path")
module.exports = {
    mode: "production", 
    entry: "./src/index.js",
    output: {
    }, 
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"]
            }
        ]
    }
}

书写对象的时候,可以在最后一个属性值后面加上,并且属性名可以不为字符串

但在写JSON的时候,属性名也需要加上“”并且最后不能加上,

mode

告知 webpack 使用相应模式的内置优化

  • none:不使用任何默认优化选项
  • production:生产模式
  • development:开发模式
entry

默认值是 ./src/index.js(一般不改,约定优于配置)

  • 单个入口语法【最常见】 entry: string | [string]
  • 多个传数组 entry: ['./src/file_1.js', './src/file_2.js']
  • 对象写法分别命名打包 entry: {app: './src/app.js',adminApp: './src/adminApp.js',},
output

默认值是 ./dist/main.js,其他生成文件默认放置在 ./dist 文件夹中

  • filename: "bundle.js" 设置打包后的文件名

多个入口 entry 的情况 filename: [name]-[id]-[hash].js

使用 占位符(substitutions) 来确保每个文件具有唯一的名称(很少用)

  • clean: true 自动清理打包目录(path指定的目录),只保留当前这次打包的文件
  • path: "" 指定打包目录,必须要绝对路径

一般会使用Node.js中的path模块来操作文件路径

const path = require('path'); //引入path模块
path.resolve(__dirname, "dist") //表示当前目录下的dist文件夹
loader

loader 让 webpack 能够去处理其他类型的文件(默认只能处理js文件),并将它们转换为有效 模块,以供应用程序使用,以及被添加到依赖图中。

使用步骤:

  1. 安装对应的 loader:yarn add css-loader style-loader ts-loader -D
  2. 配置方式(推荐):
  • test 属性:识别出哪些文件需要被转换(使用正则表达式/\.css$/i
  • use 属性:定义出在进行转换时,使用哪个 loader(字符串、数组、对象)
  • type 属性:加载图像资源,设置为"asset/resource"
  • exclude 属性:不需要转换的文件夹(正则表达式)
module.exports = {
  module: { // 易漏点
    rules: [ 
      { test: /\.css$/, use: ['style-loader','css-loader'] },
      { test: /\.ts$/, use: 'ts-loader' },
      { test:/\.(jpg|png|gif)$/i,type:"asset/resource" },
    ],
  },
};

css-loader 只负责打包,style-loader 负责渲染生效【单一职责原则】

loader 执行顺序为从后向前执行,因此 use 的数组顺序不能调换

  1. *内联方式:在每个import语句中显式指定 loader。使用!将资源中的 loader 分开。每个部分都会相对于当前目录解析。
import Styles from 'style-loader!css-loader?modules!./styles.css';
  • 使用!前缀,将禁用所有已配置的 normal loader(普通 loader)
  • 使用!!前缀,将禁用所有已配置的 loader(preLoader, loader, postLoader)
  • 使用-!前缀,将禁用所有已配置的 preLoader 和 loader,但是不禁用 postLoaders
  1. 选项可以传递查询参数,例如 ?key=value&foo=bar,或者一个 JSON 对象,例如 ?{"key":"value","foo":"bar"}

尽可能使用 module.rules,因为这样可以减少源码中样板文件的代码量,并且可以在出错时,更快地调试和定位 loader 中的问题。

babel
概念
  • 在编写js代码时,经常需要使用一些js中的新特性,而新特性在旧的浏览器中兼容性并不好。此时就导致我们无法使用一些新的特性。
  • 但是我们现在希望能够使用新的特性,我们可以采用折中的方案。依然使用新特性编写代码,但是代码编写完成时我们可以通过一些工具将新代码转换为旧代码。
  • babel就是这样一个工具,可以将新的js语法转换为旧的js,以提高代码的兼容性。
  • 如果希望在webpack支持babel,则需要向webpack中引入babel的loader

是 loader 中的一种

使用步骤
  1. 安装npm install -D babel-loader @babel/core @babel/preset-env
  • babel-loader:连接webpack和babel的中间件
  • @babel/core:babel的转换核心
  • @babel/preset-env:预设环境
  1. 配置:
module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}
  1. 在package.json中设置兼容列表
"browserslist": [
        "defaults"
 ]
  1. 配置参考:https://github.com/browserslist/browserslist
plugin
概念
  • 插件用来为webpack来扩展功能
  • 插件目的在于解决 loader 无法实现的其他事。
  • Webpack 提供很多开箱即用的 插件
常用插件

html-webpack-plugin

  • 这个插件可以在打包代码后,自动在打包目录生成html页面

使用步骤:

  1. 安装依赖yarn add -D html-webpack-plugin
  2. 引入依赖const HTMLPlugin = require("html-webpack-plugin")
  3. 配置插件
plugins: [
        new HTMLPlugin({
            // title: "Hello Webpack",  //设置title
            template: "./src/index.html"  //模板,自动引入script脚本
        })
    ]
devtool

devtool:"inline-source-map"配置源码的映射,方便调试打包后的代码。

3、开发服务器(webpack-dev-server)

  • 安装:yarn add -D webpack-dev-server
  • 启动:yarn webpack serve --open--open表示启动服务器后自动打开)

配置 webpack –watch 执行,(在本地文件夹中访问)代码发生变化时自动更新打包。

4、grunt/glup的对比

相关文章
|
1天前
|
前端开发 JavaScript 开发者
工程化(webpack+vite)
在现代前端开发中,工程化是提高开发效率和项目质量的关键。UniApp 结合 Webpack 和 Vite,提供强大的工程化支持。Webpack 功能强大,支持复杂项目的构建;Vite 则利用现代浏览器的 ESM 特性,提供快速的开发体验。开发者可根据项目需求选择合适的工具,显著提升开发效率和项目质量。
|
9天前
|
缓存 监控 前端开发
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第26天】前端工程化是现代Web开发的重要趋势,通过将前端代码视为工程来管理,提高了开发效率和质量。本文详细对比了Webpack和Gulp两大主流构建工具的选择与配置优化,并提供了具体示例代码。Webpack擅长模块化打包和资源管理,而Gulp则在任务编写和自动化构建方面更具灵活性。两者各有优势,需根据项目需求进行选择和优化。
37 7
|
8天前
|
缓存 前端开发 JavaScript
前端工程化:Webpack与Gulp的构建工具选择与配置优化
【10月更文挑战第27天】在现代前端开发中,构建工具的选择对项目的效率和可维护性至关重要。本文比较了Webpack和Gulp两个流行的构建工具,介绍了它们的特点和适用场景,并提供了配置优化的最佳实践。Webpack适合大型模块化项目,Gulp则适用于快速自动化构建流程。通过合理的配置优化,可以显著提升构建效率和性能。
22 2
|
14天前
|
前端开发 JavaScript 开发者
工程化(webpack+vite)
工程化(webpack+vite)
|
24天前
|
前端开发 JavaScript 开发者
构建工具对比:Webpack与Rollup的前端工程化实践
【10月更文挑战第11天】本文对比了前端构建工具Webpack和Rollup,探讨了它们在模块打包、资源配置、构建速度等方面的异同。通过具体示例,展示了两者的基本配置和使用方法,帮助开发者根据项目需求选择合适的工具。
19 3
|
2月前
|
前端开发 JavaScript 开发者
工程化(webpack+vite)
工程化(webpack+vite)
|
3月前
|
缓存 JavaScript 前端开发
用 vite 2 平滑升级 vue 2 + webpack 项目实战
用 vite 2 平滑升级 vue 2 + webpack 项目实战
|
6月前
|
前端开发 JavaScript 开发者
【专栏】前端工程化的重要性,强调构建工具在其中的角色,如Webpack和Rollup
【4月更文挑战第27天】本文探讨了前端工程化的重要性,强调构建工具在其中的角色,如Webpack和Rollup。Webpack以其灵活性和插件系统适用于复杂SPA项目,建议开发者理解其核心概念并优化性能。Rollup则专注于JavaScript模块打包,生成更小、更快的代码,适合小型至中型项目和库创建,以其Tree-shaking技术减小代码体积。开发者应根据项目需求、团队技术和生态选择合适工具,掌握核心原理以提升开发效率和质量。
68 1
|
6月前
|
前端开发 JavaScript Go
webpack -vite(Rollup )-Gulp (一)
webpack -vite(Rollup )-Gulp (一)
107 0
|
6月前
|
JavaScript 前端开发
构建工具:配置Webpack打包Vue项目
【4月更文挑战第24天】本文介绍了如何配置Webpack来打包Vue项目。首先,Webpack作为模块打包器处理依赖并打包成可执行文件。接着,通过安装Node.js和npm,创建Vue项目,进入项目目录并配置Webpack的入口、输出、加载器和插件。最后,运行构建命令完成打包。理解Webpack基础并按需配置,能优化前端项目构建和开发体验。
91 0