之前写的有些零散,现在一步步再重新写.记住: 如果你步骤对,但是始终没成功, 那么请不要烦心, 因为webpack版本4以上, 语义更加严格,命令有一些已经发生改变了,所以并不是你的问题!
一.确保已经安装了nodeJS之后.
二. 创建webpack-demo,我的是f盘下的,
2.然后进入这个文件夹:
3.进行初始化,一路都是选择默认(回车就可以):
查看初始化后的文件夹,里面只有一个json文件:
4. 接下来装webpack
npm install webpack --save-dev
安装完成:
查看项目下,发现已经:
5.然后用编译器打开当前项目,我的是HBuilder,如下图:
在这个文件下创建一个demo.js文件,并创建一个函数.
6.然后我们尝试进行打包,回到命令框
原本输入了 webpack demo.js demo.bundle.js,然后报错了
这是为什么呢?原因是我的webpack版本过高,原来的命令已经不适用了
如下查询版本号:
那应该如何解决?
更换打包命令为: webpack demo.js -o demo.bundle.js
其中 demo.dundle.js是打包后生成的文件的文件名
其中的一些参数值:
Version:webpack版本
time:这次打包所花费的时间
列表信息
Asset:打包这次生成的文件
Size:这次生成文件的大小
Chunks:这次打包的分块
chunk Names:这次打包的名称
接下来查看以下项目:
可以看到demo.js已经被打包为了demo.bundle.js文件,但是,这个并没有打包成功! 因为打包的时候没有出现红色的error了,但是还有黄色的警告.如下图.
黄色警告:是因为webpack4引入了模式,有开发模式,生产模式,无这三个状态
以及打开我们生成的文件,代码如下:
可以看到末尾并没有生成我们所打包的demo.js的信息.
黄色部分的警告的意思是,没有设置模式,有开发模式和生产模式两种,接下来,找到package.json.添加上"dev"和"build"这两个信息以及他们的值.