欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

webpack踩坑之路(1)

程序员文章站 2024-03-25 11:20:22
...

刚接触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踩坑之路(1)
然而,在执行webpack main.js bundle.js时,又遇到坑了
webpack踩坑之路(1)
我以警告(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,并成功在页面中起作用。
webpack踩坑之路(1)

3. 其他坑

我在main.js文件中写代码时,想使用module.exports导出模块,在webstorm中发现module下面显示波浪线提示unresolved variable or type module
解决办法为:

在WebStorm内部:
1. 进入文件 - >设置 - >语言和框架 - > Node.js和NPM
2. 通过按启用按钮确保’Node.js核心库已启用’。
3. 点击确定保存设置。

这是我刚开始接触webpack的时候踩到的一些坑,大家见笑了。

相关标签: webpack