webpack踩坑之路(1)
刚接触webpack,依照网上的教程编写最简单的一个实例,遇到了小小的几个坑,填上后在这里记录一下。
1.安装
/*全局安装*/
cnpm install -g webpack
/*在项目文件夹再安装一次,这也是官方文档推荐做法*/
cnpm install --save-dev webpack
还有一个小坑就是它会询问安装webpack-cli或者webpack-command,
我暂时不纠结两者的异同,选择安装了webpack-cli
cnpm install webpack-cli
2.打包
这是最简单的一个实例,把app目录中的main.js打包成bundle.js。
然而,在执行webpack main.js bundle.js
时,又遇到坑了
我以警告(warning)信息为关键词百度搜索了一番,发现这他喵的居然是webpack4的语法问题,
出现这个错误提示并不是我们环境装错了,而是webpack4 更新后对webpack语法进行了更严格的要求,之前的命令被修订为 npx webpack a.js –output-filename bundle.js –output-path . –mode development
这样就可以成功对文件进行打包了
最后,我使用npx webpack main.js --output-filename bundle.js --output-path . --mode development
这种语法格式,成功把main.js打包成了bundle.js,并成功在页面中起作用。
3. 其他坑
我在main.js
文件中写代码时,想使用module.exports
导出模块,在webstorm中发现module下面显示波浪线提示unresolved variable or type module
解决办法为:
在WebStorm内部:
1. 进入文件 - >设置 - >语言和框架 - > Node.js和NPM
2. 通过按启用按钮确保’Node.js核心库已启用’。
3. 点击确定保存设置。
这是我刚开始接触webpack的时候踩到的一些坑,大家见笑了。
上一篇: webpack踩坑记录
下一篇: HDRP踩坑记录
推荐阅读
-
webpack踩坑记录
-
webpack踩坑之路(1)
-
webpack css兼容性处理踩坑记录
-
Spring Boot 踩坑之路之 Configuration Annotation Proessor not found in classpath 博客分类: springboot
-
Spring Boot 踩坑之路之 Configuration Annotation Proessor not found in classpath 博客分类: springboot
-
吐槽前端组件化的踩坑之路_html/css_WEB-ITnose
-
踩坑之路-线程私有数据
-
踩坑之路-用户Uid分配
-
Android 上传开源项目到 jcenter 实战踩坑之路
-
踩坑日志1----从zuulFilter到Filter