Open FrankFang opened 7 years ago
webpack-demo ycr
yjl for v-o-r task-01 link
webpack-demo HJN
webpack-demo GJC
webpack-demo WXY
webpack-demoWhj
webpack CJH
webpack LWE
github仓库链接 zw
webpack-demo LX
webpack-demo ZJY
webpack-demo CJC
webpack-demo zxw
webpack-demo zph
webpack-demo wlf
webpack_demo任务3班陈捷
webpack-demoxxk
webpack-demo wq
最后一个,我是来收尾的。。。 hsy
webpack-demo SHZ
webpack2-demo GQC
webpack-demo LC
webpack-demo 任务10李杨
webpack-test 任务6-任磊,挤一挤,插个班~
webpack-demo 任务7-ZLJ
webpack-demo 任务6-赵力群
webpack-demo 任务8-肖承华
demo-1 任务10-张睿 我演示官网的代码没有问题
link to Vue-task 直播9班杨然
webpack-first-demo 直播11班-杨涛
webpack-demo 直播11班-丁超发
任务1703 赖文斌
webpack-demo LK
webpack-demo 弄庆洋
webpack-demo boloog
webpackDemo 空末
webpack-demo 赵阳
webpack-demo 沈文豪
webpack_dome 杨家文
Webpack
我学新东西的套路就是: 「copy - run - modify」 「抄 - 运行 - 修改」
我们学 Webpack 也遵循同样的套路。
安装
我们要使用 npm 来安装 webpack。
npm config set loglevel http
,让你知道 npm 发的每一个请求npm config set progress false
,关闭那个进度条npm config set registry https://registry.npm.taobao.org/
npm config delete registry
即可npm i -g webpack
,正式安装 webpacksudo npm i -g webpack
webpack --help
如果看到类似下面的信息,就说明安装成功ES Modules
终于安装好了,可以开始使用 Webpack 了吗?
不行,我们有一个重要的知识需要学习一下,那就是 ES 模块,也就是 import 和 export 两个关键字。
请现到 MDN 上了解一下它们的用法:
import 用法
export 用法
如果你看晕了,没关系,你只要看两个页面的最前面一段就行了。后面我们会用 「copy - run - modify」 套路来学习它们。
Webpack
copy:去 Webpack 的官网上找个例子来玩玩
https://webpack.js.org/
往下滚,看到例子
run:把例子弄到本地
webpack
,看到如下结果:不靠谱的官网
webpack
,又出错:是阮的问题吗?不是,他的教程里说了要安装一些 npm 包才能成功。 上面的提示说没有 'babel-loader' ,我们试着安装一下:
再次运行
webpack
,它说需要安装 'babel-core',跟上次的提示不一样了,看来只要我们一直安装下去就行了再运行
webpack
,提示变了:这次需要安装的是
babel-preset-es2015
(不要问我为什么它不提示完整的名字)Modify
虽然没有报错,但是什么功能也没有啊!摔!再次吐槽 Webpack 官网。
我们来改一下 bar.js 吧:
重新运行 webpack,然后刷新 page.html。
如果你看到浏览器弹框说「Hello Webpack」,那么你就学会使用 Webpack 了。
致饥人谷学员
你需要看懂这篇教程,并且运行成功。
然后新建一个 GitHub 项目,将代码上传到里面。上传成功后,将项目主页的链接放在本帖的评论区中,谢谢!
注意
截止时间:本周四21:00前。我会在周六直播此贴内容。
你需要在项目的根目录添加 .gitignore 文件,并且在里面加上一行
node_modules
,以防止你把这个目录上传到 GitHub 上。你在新建项目的时候选择 Node,也可以达到同样目的。但是缺点就是我无法使用你安装的 npm 包,所以你需要把你安装的包写在一个地方,比如 README 里:
当然你用 package.json 来记录就更好了
无关人员请不要回复此贴,回复会被删。