webpack 学习笔记

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。新项目中的h5部分用到了vue.js,并使用webpack打包模块。重新学习webpack。

 webpack 中文文档 | webpack 中文网，这里能找到webpack相关的问题，如 名词概念，配置、api等。

 如果 之前对webpack没有任何了解，这篇文章比较适合入门。

http://www.runoob.com/w3cnote/webpack-tutorial.html

如果对webpack有一定的了解，这篇文章中将了很多webpack在项目中的使用，和一些常用的配置。

 https://www.jianshu.com/p/42e11515c10f

但是在实际学习过程中，还是遇到了很多问题，在此记录 

 

一、node.js 安装教程

安装webpack之前，需要安装node.js 和npm。

http://www.runoob.com/nodejs/nodejs-install-setup.html 

注意，

① 上面这个教程中的直接下载的地址对应的版本很低，最好自己去找对应的高版本，地址在

https://nodejs.org/en/download/

② 有文章提出如果安装时改变了默认安装路径，可能会出现各种异常。因为node安装完成之后，会自动生成path的全局变量。

这里被坑了好久，所以最好使用默认安装路径，减少不必要的麻烦。

二、NPM 使用介绍

http://www.runoob.com/nodejs/nodejs-npm.html

由于 npm 安装速度慢，可以使用淘宝的镜像及其命令 cnpm，具体的在教程最后一部分

淘宝 NPM 镜像 ：https://npm.taobao.org/

其中，遇到了cnpm不是内部命令的问题，我参考的是这篇文章。

cnpm不是内部命令的解决方案：配置环境变量

下面这个方案貌似也可以行，而且比较简单，但是我没有试过

关于淘宝cnpm 安装后cnpm不是内部或外部命令的解决办法

实际安装过程中还会出现其他问题，但是在网上都可以找到相关的文章。

 

三、注意事项 

1、npm install 安装软件，出现 operation not permitted, mkdir

执行安装命令 就报错，哭。

提示是没有权限，网上有文章提到解决方法：

在开始菜单栏里打开cmd的时，右击选择“以管理员身份运行”。然后再在打开的cmd里运动install就没问题了。

确实可以解决这个问题，但是在之后的还是会出现，尤其是在使用webstrom开发工具执行相关命令是，还是有这样的情况。

我使用的方法是，找到node的安装目录，将文件的权限赋予给当前用户或者所有用户。

 

2、webpack 4X 后需要安装webpack-cli 请注意需要安装在同一目录，或者都使用全局安装

 在安装webpack时，输入webpack -v，提示我需要安装webpack-cli，如图：

但是如果按照上面的命令执行，这个问题不会消失。
因为在webpack 3中，webpack本身和它的CLI以前都是在同一个包中，但在第4版中，他们已经将两者分开来更好地管理它们。所以需要 安装在同一个目录。

或者两个都要一起做全局安装  ，在安装命令后加  “-g” ，如

npm install -g webpack-cli@2.0.15 --save-dev

我是使用两个都全局安装。

3、安装时要指定版本

不要 直接试用 cnpm install webpack -g 命令。 这样会默认安装最新版的webpack，  但是各模板最新的版本之间兼容却有问题，必须将某些模板降低版本。

所以最好指定到一些稳定的，相互兼容的版本中。 现在我使用是

这个问题坑了我好久好久，很多不明白的问题 有可能就是版本不兼容造成。

4、在webstorm里配置nodejs环境

https://blog.csdn.net/qq_32678401/article/details/81628088

这篇文章很简单，配置也很简单，

重启！！！

webpack的安装过程中，如果改了配置，改环境需要重启cmd，如果是WebStorm等开发软件，软件也要重启。

甚至还要重启电脑，我按照文章改了配置，但是不起作用，重启电脑就好了。

 

5、npm install chromedriver 报错

下载源被封了！！！！

连接淘宝的下载源下载就可以了：

npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver 

 

 

 

 

在学习webpack过程中，我的感觉是，遇到的问题真的是层出不穷，什么都能出问题。现在还有很多问题没搞明白。

个人认为主要原因有，

1.版本不稳定，4.x之后的和之前的有区别，如果不知道，会有很多坑，这也是遇到问题找不到正确解决方案的重要原因，版本都不对，他的方案怎么会起作用。

2.版本不兼容。我耗时最长的问题，就是版本不兼容造成的。按照学习文档去安装、部署，结果跑不起来，各种错误，谁知道，最后定位到的竟然是最新版的不兼容。。。。

3、webpack是一个前端资源加载/打包工具，项目中使用就只是做配置，一旦项目运行有问题，确实很难想到时webpack配置的问题