Webpack5入门到原理2:基本使用

这篇具有很好参考价值的文章主要介绍了Webpack5入门到原理2:基本使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Webpack 是一个静态资源打包工具。

它会以一个或多个文件作为打包的入口,将我们整个项目所有文件编译组合成一个或多个文件输出出去。

输出的文件就是编译好的文件,就可以在浏览器段运行了。

我们将 Webpack 输出的文件叫做 bundle。

功能介绍

Webpack 本身功能是有限的:

开发模式:仅能编译 JS 中的 ES Module 语法

生产模式:能编译 JS 中的 ES Module 语法,还能压缩 JS 代码

开始使用

1. 资源目录

webpack_code # 项目根目录(所有指令必须在这个目录运行)
    └── src # 项目源码目录
        ├── js # js文件目录
        │   ├── count.js
        │   └── sum.js
        └── main.js # 项目主文件

2. 创建文件

  • count.js
export default function count(x, y) {
  return x - y;
}
  • sum.js
export default function sum(...args) {
  return args.reduce((p, c) => p + c, 0);
}
  • main.js
import count from "./js/count";
import sum from "./js/sum";

console.log(count(2, 1));
console.log(sum(1, 2, 3, 4));

3. 下载依赖

打开终端,来到项目根目录。运行以下指令:

  • 初始化package.json
npm init -y

此时会生成一个基础的 package.json 文件。

需要注意的是 package.json 中 name 字段不能叫做 webpack, 否则下一步会报错

  • 下载依赖
npm i webpack webpack-cli -D

4. 启用 Webpack

  • 开发模式
npx webpack ./src/main.js --mode=development
  • 生产模式
npx webpack ./src/main.js --mode=production

npx webpack: 是用来运行本地安装 Webpack 包的。

./src/main.js: 指定 Webpack 从 main.js 文件开始打包,不但会打包 main.js,还会将其依赖也一起打包进来。

--mode=xxx:指定模式(环境)。

5. 观察输出文件

默认 Webpack 会将文件打包输出到 dist 目录下,我们查看 dist 目录下文件情况就好了

小结

Webpack 本身功能比较少,只能处理 js 资源,一旦遇到 css 等其他资源就会报错。

所以我们学习 Webpack,就是主要学习如何处理其他资源。文章来源地址https://www.toymoban.com/news/detail-816323.html

到了这里,关于Webpack5入门到原理2:基本使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Webpack5入门到原理17:Loader 原理

    帮助 webpack 将不同类型的文件转换为 webpack 可识别的模块。 分类 pre: 前置 loader normal: 普通 loader inline: 内联 loader post: 后置 loader 执行顺序 4 类 loader 的执行优级为:pre normal inline post 。 相同优先级的 loader 执行顺序为:从右到左,从下到上。 例如: 使用 loader 的方式 配

    2024年01月22日
    浏览(60)
  • Webpack5入门到原理5:处理样式资源

    我们学习使用 Webpack 如何处理 Css、Less、Sass、Scss、Styl 样式资源 Webpack 本身是不能识别样式资源的,所以我们需要借助 Loader 来帮助 Webpack 解析样式资源 我们找 Loader 都应该去官方文档中找到对应的 Loader,然后使用 官方文档找不到的话,可以从社区 Github 中搜索查询 Webpack 官

    2024年01月21日
    浏览(48)
  • Webpack5入门到原理21:提升开发体验

    开发时我们运行的代码是经过 webpack 编译后的,例如下面这个样子: 所有 css 和 js 合并成了一个文件,并且多了其他代码。此时如果代码运行出错那么提示代码错误位置我们是看不懂的。一旦将来开发代码文件很多,那么很难去发现错误出现在哪里。 所以我们需要更加准确

    2024年01月25日
    浏览(42)
  • Webpack5入门到原理14:生产模式介绍

    生产模式是开发完成代码后,我们需要得到代码将来部署上线。 这个模式下我们主要对代码进行优化,让其运行性能更好。 优化主要从两个角度出发: 优化代码运行性能 优化代码打包速度 我们分别准备两个配置文件来放不同的配置 因为文件目录变了,所以所有绝对路径需要

    2024年01月23日
    浏览(61)
  • Webpack5入门到原理12:处理 Html 资源

    webpack.config.js 去掉引入的 js 文件,因为 HtmlWebpackPlugin 会自动引入 此时 dist 目录就会输出一个 index.html 文件

    2024年01月23日
    浏览(97)
  • Webpack5入门到原理22:提升打包构建速度

    开发时我们修改了其中一个模块代码,Webpack 默认会将所有模块全部重新打包编译,速度很慢。 所以我们需要做到修改某个模块代码,就只有这个模块代码需要重新打包编译,其他模块不变,这样打包速度就能很快。 HotModuleReplacement(HMR/热模块替换):在程序运行中,替换、

    2024年01月21日
    浏览(45)
  • Webpack5入门到原理6:处理图片资源

    过去在 Webpack4 时,我们处理图片资源通过 file-loader 和 url-loader 进行处理 现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了,我们只需要简单配置即可处理图片资源 src/images/1.jpeg src/images/2.png src/images/3.gif src/less/index.less src/sass/index.sass src/styl/index.styl 打开 index.html 页面查看

    2024年01月20日
    浏览(43)
  • Webpack5入门到原理11:处理 js 资源

    有人可能会问,js 资源 Webpack 不能已经处理了吗,为什么我们还要处理呢? 原因是 Webpack 对 js 处理是有限的,只能编译 js 中 ES 模块化语法,不能编译其他语法,导致 js 不能在 IE 等浏览器运行,所以我们希望做一些兼容性处理。 其次开发中,团队对代码格式是有严格要求的

    2024年01月20日
    浏览(58)
  • Webpack5 基本使用 - 2

    loader 是辅助打包工具。 webpack 默认只能打包 js 文件,打包其它模块就需要配置 loader 来告诉 webpack 该怎么去打包其它文件。 loader 可以将文件从不同的语言转换为 JavaScript 。 一类文件如果需要多个 loader 处理, loader 的执行顺序是从后往前。 打包样式文件 打包 css css 文件需要

    2024年01月24日
    浏览(38)
  • Webpack5入门到原理15:提取 Css 成单独文件

    Css 文件目前被打包到 js 文件中,当 js 文件加载时,会创建一个 style 标签来生成样式 这样对于网站来说,会出现闪屏现象,用户体验不好 我们应该是单独的 Css 文件,通过 link 标签加载性能才好 webpack.prod.js webpack.prod.js 我们可以在 package.json 文件中添加 browserslist 来控制样式

    2024年01月24日
    浏览(58)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包