初次学习webpack的一些心得
原谅转行小白比较笨,看了那么多的文档API仍是没学好webpack,这阵子公司闲决定把webpack学完,现在开始表演,希望获得老师转身!
1、开门见山首先就是安装,先安装node.js,然后打开命令行(cmd)安装webpack,执行命令:npm install webpack -g
ok,检查你是否安装好了 输入 webpack -v 出现版本号就是可以咯。接下来我们开始打包文件吧
2、首先让我们在本地创建一个文件 输入命令 mkdir wpk-test(wpk-test是文件名,爱叫啥叫啥),然后进入这个文件夹
3、然后我们打开编辑器,创建几个文件咯,首先建立一个src文件夹,里面有index,js、str.js。
我们在str.js写下我们要的代码,来个简单的吧,比如
function init(s){ return s; } module.exports=init;
你是否会问module.exports=init;这句代码是什么?那么我悄悄告诉你
module.exports 对象是由模块系统创建的。在我们自己写模块的时候,需要在模块最后写好模块接口,声明这个模块对外暴露什么内容,module.exports 提供了暴露接口的方法。
懂了么,不懂我也没办法了,我只知道这么多,哈哈。
ok,现在在str.js写下了这个代码,那么现在我们去index.js文件里写下另外一段代码
var fn = (require('./str.js')); document.write(fn('你好世界,biubiubibiu'));
首先我们先看第一段代码,只是一个简单的函数,就是你穿个参数进去,传什么我就返回什么。然后在index.js里 我们定义一个变量 fn,括号里的require又要一些时间来解释了,这里先不解释,文末在解释。
别发呆了,快上车。代码接下来就是输出函数,传个参数进去。ok,这个时候你会问了,那现在html文件那些在哪?网页怎么显示?别急,马上来
我们建个html文件,然后引入js,引入哪个?str.js还是index.js?都不是,我们引入main.js,main.js从何而来?从来处来,我们重新回来cmd,执行命令
webpack --mode development 或者 webpack --mode production
就已经打包好了,这个时候回到编辑器,是不是多了一个文件夹dist,里面有个js文件叫做main?那么你引入他们就好了
这个时候你打开页面,就可以看到效果了,这就是最简单的单文件打包了。
再来说一下require是什么东西:不想打字,想知道直接去看阮雪峰老师的博文吧http://www.ruanyifeng.com/blog/2015/05/require.html
整理一下刚学踩了几个坑;
刚开始是将文件统一放在一个层级下,那么打包时就出现了下面的情况:
1、当一切准备好了,兴高采烈的输入了 webpack str.js bundle.js,然后收获一串错误
The CLI moved into a separate package:webpack-cli.
Please install 'webpack-cli' in addition to webpack itself to use the CLI.
->when using npm: npm install webpack-cli -D
->when using yarn: yarn add webpack-cli -D
为啥?因为是要我们安装webpack-cli,简单啊,那我就在项目本地装一个不就ok了
然后你又兴高采烈的输入了 npm install webpack-cli -D,然后再次执行打包命令,又收获了一串错误,
The CLI moved into a separate package:webpack-cli.
Please install 'webpack-cli' in addition to webpack itself to use the CLI.
->when using npm: npm install webpack-cli -D
->when using yarn: yarn add webpack-cli -D
哦豁?原来是要在全局安装,那也还是很简单的嘛,卸载了重装不就好了,然后你又兴高采烈的输入了
npm uninstall webpack-cli
npm install -g webpack-cli
装好以后迫不及待的打包,结果又收获一串错,哈哈哈哈,怀疑人生?头皮发冷吗?
WARNING in configuration The 'mode' option has not been set. Set 'mode' option to 'development' or 'production' to enable defaults for this enviroment. ERROR in multi ./hello.js bundle.js Module not found:ERROR:Can't resolve 'bundle.js' in 'C:/Users/你的用户名/Desktop/webpack-test' @ multi ./hello.js bundle.js
是因为没有配置mode选项,然后我们输入上面所说的两种命令
webpack --mode development
或者
webpack --mode production
结果又报错,对不起,我可能要去世了,不学了,先走一步。
少年,快完了,一步步来嘛,这个时候报错是
ERROR in Entry module not found:ERROR:Can't resolve './src' in 'C:/Admin/pc/Desktop/webpack-test'
就是说没有入口文件,那么我们继续创建就好了,将index.js或str.js一起丢进sec文件夹里,再来打包。其实这里还是有一个问题的。
webpack4.x的打包已经不能用webpack 文件a 文件b
的方式,而是直接运行webpack --mode development
或者webpack --mode production
,这样便会默认进行打包,入口文件是'./src/index.js'
,输出路径是'./dist/main.js'
,
其中src目录即index.js文件需要手动创建,而dist目录及main.js会自动生成。 因此我们不再按webpack 文件a 文件b
的方式运行webpack指令,而是直接运行,所以打包命令直接输入webpack --mode development或者webpack --mode production就好了
好了,今天先到这,快去写bug吧!
- Spring官网下载dist.zip的几种方法
- Spring Security笔记:HTTP Basic 认证
- WordPress免插件仅代码实现文章浏览次数的方法(1)
- Reflector 插件
- java:多线程基础之Runnable、Callable与Thread
- 这个美女程序员写的代码,带人类成功登月
- Hadoop基础教程——Hadoop单机版搭建
- 流量调整和限流技术
- 性能分析工具dotTrace
- struts2 异常处理3板斧
- UE4中的单映射:TMap容器
- Visual Studio 2015 前端开发工作流
- 易学易用的Windows PowerShell
- mongodb-java-driver基本用法
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android 天气APP(十)继续优化、下拉刷新页面天气数据
- Activity 活动跳转(Java&Kotlin)
- Android 天气APP(九)细节优化、必应每日一图
- Android CheckBox修改选中颜色并去除选中时的水波纹效果
- 绘制带回归线的散点图
- Java&Android像素px、dip转换工具类
- Android WIFI是否连接,网络状态监测工具类
- Kotlin学习日志(五)类与对象
- Android 应用横屏运行
- Android 修改EditView输入框的光标颜色
- Android控件显示、隐藏时,增加动画效果
- Android 自定义样式Shape
- 倒计时工具类
- Android 折叠式布局
- 如何探测内网存活主机