webpack学习（一）

在学习使用webpack，所以写个博客记录一下，方便以后查阅

在安装webpack之前在电脑里新建一个webpack项目工程文件夹，然后在这个文件夹中打开命令行

要使用webpack，必须先安装配置好nvm，然后安装npm、node

在命令行中敲入这行代码,全局安装webpack

npm install -g webpack 

输入命令行查看webpack是否安装成功：

webpack -v

使用这行命令时老是会输出一个webpack-cli的一个提示，在网上查了，说是不要安装4版本的webpack，也不知道为什么。。。然后安装了webpack 3.5.3版本，使用这条命令行就能查到webpack的版本了

npm install -g [email protected]
webpack -v

后来查了下，好像是因为node版本较低，webpack4最低支持node 6.11.5版本，而我的是6.11.2版本

查看现在已安装了node版本：

nvm ls

重新安装使用高版本的node，在官网查到目前官方认定的node最高版本是8.9.4，所以安装这个版本：

nvm install v8.9.4

nvm use 8.9.4

装了高版本的node后一直拒绝访问。。。打算重新装nvm，配置环境变量

重新安装nvm之后，安装node和nmp时，node安装成功，npm失败，原因是地址的问题，将其下载地址改为国内淘宝镜像，将原本下载的node手动删除，然好在setting.txt文件末尾添加以下两行文字：

node_mirror: https://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/

然后重新下载就能下载了，node和npm都能正常使用。

然后进入到webpack：从前面的初始化npm，全局安装webpack

安装淘宝镜像（cnpm）：

npm install -g cnpm --registry=https://registry.npm.taobao.org

使用淘宝镜像来安装资源更快。

重新安装webpack还是会提示webpack-cli，这个应该是webpack4新增的一个东西吧，实在是找不到，安装完这个之后webpack-v就能正常输出版本号了

局部安装webpack到这个文件夹下

npm install --save-dev webpack 

然后可视文件夹下会看到多了一个文件夹和一个package.json文件，如下图所示：

然后创建一个index.html 和src/index.js

index.html的代码如下：

index.js的代码如下：

function component() {
  var element = document.createElement('div');

  // Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

然后保存，点击index.html就可以运行了，以下是运行的结果：