webpack打包原理及如何实现loader和plugin-创新互联
这篇文章主要讲解了webpack打包原理及如何实现loader和plugin,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。
创新互联建站专注于济阳网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供济阳营销型网站建设,济阳网站制作、济阳网页设计、济阳网站官网定制、重庆小程序开发服务,打造济阳网络公司原创品牌,更为您提供济阳网站排名全网营销落地服务。1. webpack打包基本原理
webpack的一个核心功能就是把我们写的模块化的代码,打包之后,生成可以在浏览器中运行的代码,我们这里也是从简单开始,一步步探索webpack的打包原理
1.1 一个简单的需求
我们首先建立一个空的项目,使用 npm init -y
快速初始化一个 package.json
,然后安装 webpack webpack-cli
接下来,在根目录下创建 src
目录, src
目录下创建 index.js
, add.js
, minus.js
,根目录下创建 index.html
,其中 index.html
引入 index.js
,在 index.js
引入 add.js
, minus.js
,
目录结构如下:
文件内容如下:
// 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-创新互联
URL链接:http://myzitong.com/article/dsdchj.html