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的时候踩到的一些坑，大家见笑了。