资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

webpack打包原理及如何实现loader和plugin-创新互联

这篇文章主要讲解了webpack打包原理及如何实现loader和plugin,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。

创新互联建站专注于济阳网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供济阳营销型网站建设,济阳网站制作、济阳网页设计、济阳网站官网定制、重庆小程序开发服务,打造济阳网络公司原创品牌,更为您提供济阳网站排名全网营销落地服务。

1. webpack打包基本原理

webpack的一个核心功能就是把我们写的模块化的代码,打包之后,生成可以在浏览器中运行的代码,我们这里也是从简单开始,一步步探索webpack的打包原理

1.1 一个简单的需求

我们首先建立一个空的项目,使用 npm init -y 快速初始化一个 package.json ,然后安装 webpack webpack-cli

接下来,在根目录下创建 src 目录, src 目录下创建 index.jsadd.jsminus.js ,根目录下创建 index.html ,其中 index.html 引入 index.js ,在 index.js 引入 add.jsminus.js

目录结构如下:

webpack打包原理及如何实现loader和plugin

文件内容如下:

// add.js
export default (a, b) => {
 return a + b
}
// minus.js
export const minus = (a, b) => {
 return a - b
}
// index.js
import add from './add.js'
import { minus } from './minus.js'

const sum = add(1, 2)
const division = minus(2, 1)
console.log('sum>>>>>', sum)
console.log('division>>>>>', division)

当前名称:webpack打包原理及如何实现loader和plugin-创新互联
链接分享:http://cdkjz.cn/article/dsdchj.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220