基本使用
使用 Webpack
Webpack 命令
Webpack 配置
第三方脚手架(vue-cli、Angular-cli、React-starter)
Note: 现在安装webpack 基本是安装webpack-cli 工具,还不是很完善
初始化项目的功能
版本之间迁移的功能
版本迁移知识改变 配置文件,不过安装的依赖不会改变,需要手动去改变
用 Webpack-cli 工具初始化一个项目,指定 webpack 官方提供的一个 webpack 的项目模版
项目初始化
遇到第一个问题时选择 Pengwings 不然 你得到
webpack.config.js
就是一个空对象的文件;不过生成的文件里配置也是比较简单的
🌰
以一个小实例,来玩玩看~
创建一个
my_webpack
文件夹创建两个
js
文件:app.js
、sum.js
sum.js
文件,添加一个sum
两数求和函数,并向外导出此函数app.js
文件,引入sum.js
导出的sum
函数,并调用sum
函数对2+3
进行求和使用
webpack
命令, 对app.js
进行打包,输出app.bundle.js
文件看下打包后的文件代码,运行
app.bundle.js
上面的例子,用的是 ES6 Module
,我们再用下 CommonJS
的模块化
新增一个
minus.js
文件,实现minus
两数相减的函数,并导出app.js
引入minus.js
文件,并调用minus
函数,完成任意两数相减再次打包执行
接下来,我们继续看看AMD
模块化吧
新增一个
multiplication.js
文件,实现multiplication
两数相乘的函数,并导出app.js
引入multiplication.js
文件,并调用multiplication
函数,完成任意两数相乘再次打包执行,因为
AMD
模块化,所以就不能在 'node'环境里执行了,创建一个index.html
在浏览器里执行
这次打包你会发现,多出了一个0.bundle.fbee5.js
文件,因为AMD
的模块异步加载,所以会把引用的模块单独打一个 chunk
Last updated