初学webpack遇到的坑

发表于   |   分类于   |     |   阅读次数

webpack是继grunt和gulp之后的一个自动化集成的工具，虽说我grunt都还没有熟练操作，但是有了对grunt了解，我想尽快的掌握比较新的技术。

我主要是按照知乎专栏中的这篇文章一步一步的傻瓜操作的，基本说的很详细，照着步骤来做就可以搭建一个简单地webpack环境。

我现在主要是按照文章的顺序，对我其中遇到的坑，来一个总结，下次如果还会再搭一个环境的时候，不至于没有头绪。

下面我会按照文章中标题的顺序，来总结我遇到的坑，没有问题的部分我就不详细叙述，按照文章中的步骤来就可以。

配置webpack

在这个部分，我按照文章中的步骤做好，最后在项目根目录下运行webpack的时候，命令行报出了错误。

1
2
3
4

module.js:340
throw err;
canot find module 'webpack/lib/node/NodeTemplatePlugin'

说不能找到这个模块，但是当我找到这个路径/usr/local/lib/node_modules/webpack/lib/node，cd进入后，ls查看我目录下是有这个文件的。所以问题应该不是缺少这个文件，

然后我上网搜索，知道了应该是路径设置的不正确，并找到了解决的办法。在这里

是因为我们没有设置环境变量，按上面这篇文章我设置了环境变量之后

export NODE_PATH="/usr/local/node_modules:/usr/local/lib/node_modules"

再次运行webpack后就能顺利的构建出一个项目了。

第一个坑算是踏过去了，用了大概半天时间。。。。一种一种方法去试。。。。

配置webpack-dev-server

在这部分我又遇到一个坑,在按照步骤一步一步做好后，在运行最后的命令npm start的时候有报出了错误。

1
2
3
4

ERROR in multi main
Module not found: Error: Cannot resolve module 'webpack/hot/dev-server' in /Users/yatessss/webpack
 @ multi main

大概的意思我查了一下，就是说模块无法解析，目前为止这个坑还没有填平。但是这不影响我们继续往下进行，这一部分是可以让服务器监听文件的变化的，在我们不刷新页面的时候，内容也会随着文件的变化做出相应的修改。

我现在猜测这个错误的出现可能有两个原因。第一，就是在解决上一个环境变量的错误的时候，设置了路径，导致路径更改后找不到这个模块。第二，这个模块没有正确安装（但是我已经安装了很多遍）。

我最后解决了这个问题。解决方法是受到了这个问题的启发点击这里，这里不得不说stackoverflow这个网站真的是很好的。

这里我只改动了知乎这篇文章的设置的两个地方（其实把他们删掉应该也是可以的），在stackoverflow这个问题里有这样一句话：--hot option is looking for some files locally，这里是说--hot这个参数是设置在当前目录寻找一些文件的，而我们设置过环境变量，我在猜想是不是设置过变量后，所以我不能在当前找到这个模块了，所以我试着把config文件中devServer配置项中的hot改为了false，如下：

1
2
3
4
5
6
7

devServer: {
        historyApiFallback: true,
        hot: false,
        inline: true,
        progress: true
    }

把package.json文件中的scripts配置项改为"start": "webpack-dev-server --inline"，如下：

1
2
3
4

"scripts": {
    "start": "webpack-dev-server --inline"
  }

这样，我们就禁止了他只在项目目录中寻找文件，在当前目录中没有找到的话，他会寻找根目录，经过试验，我的想法得到了证实，这样改动之后，npm start命令可以正常运行了。

这个问题也算是有了解决方法。

添加CSS样式

在添加css样式这部分，没有问题。但是在配置css预编译程序sass的时候，遇到了两个错误。第一个错误是说我没有安装node-sass，这时候我们安装node-sass就好了；第二个错误我没有记录下来，大概是说我的node-sass的版本和目前node不匹配，而且错误当中也给出了解决办法，只要运行npm rebuild node-sass等一会之后，这个错误就可以解决了。

添加第三方库

再添加第三方库的时候，按照步骤没有什么大的问题，只是有时候缺少一些依赖的库，比如遇到下面这种情况。

1
2
3
4
5

├── UNMET PEER DEPENDENCY file-loader@*
├── jquery@2.2.0
├── moment@2.11.1
└── UNMET PEER DEPENDENCY webpack@^1.12.6

这样的话就是缺少file-loader 这个依赖的库，所以只要安装这个库就好了。

以上，就是我学习webpack第一部分碰到的一些问题，总结来加深印象。