Ubuntu搭建webpack环境

webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等，当然，要使用webpack当然得先搭建一个webpack环境，由于之前搜索过很多文章，但是并没有安装成功，一番折腾之下，最后终于安装成功， 
注：此安装方法我在Ubuntu12.04 LTS,14.04 LTS,和16.04 LTS上试过都是可以成功安装的。 
1.安装nodejs和npm 
npm是随同nodejs一起安装的包管理工具，能解决nodejs代码部署上的很多问题,webpack的安装也依赖于nodejs和npm，所以先来安装nodejs和npm。 
很多同学可能之前通过这种方式安装过nodejs：

?

1

2

sudo apt-get update

sudo apt-get install nodejs

如果之前通过这种方式安装之后webpack无法正常安装的话建议把原来的先卸载了吧，可能版本太低了。卸载：

?

1

2

sudo apt-get autoremove --purge nodejs

sudo apt-get autoremove --purge npm

再安装新的版本： 
从nodejs官网下载对应操作系统的nodejs，比如我的系统是Ubuntu14.04LTS,64位，下载对应的v6.9.2版本： 

将安装包下载后解压，然后移动或复制到/opt/目录（一般自己下载的软件放在这个目录下面）

?

1

sudo mv node-v6.9.2-linux-x64 /opt/

如果之前尝试安装时设置过node和npm软链接，建议先删除：

?

1

2

sudo rm -rf /usr/local/bin/node

sudo rm -rf /usr/local/bin/npm

之后设置node和npm软链接，设置软链接的目的是在任意目录都可以直接使用node和npm命令：

?

1

2

sudo ln -s /opt/node-v6.9.2-linux-x64/bin/node /usr/local/bin/node

sudo ln -s /opt/node-v6.9.2-linux-x64/bin/npm /usr/local/bin/npm

设置完软连接应该就已经安装成功 
安装成功在任意目录下输入：

?

1

2

node -v    //6.9.2

npm -v    //3.10.9

如果出现版本号说明安装成功！

2.安装webpack 
安装完nodejs环境之后就可以安装webpack打包工具了，建议最好先全局安装一下：

?

1

npm install webpack -g

安装完在命令行输入webpack 
如果提示命令找不到就设置一下软连接：

?

1

sudo ln -s /opt/node-v6.9.2-linux-x64/bin/webpack /usr/local/bin/webpack

（webpack是否全局安装可以到/opt/node-v6.9.2-linux-x64/bin/查看）

3.安装webpack-dev-server 
webpack-dev-server的作用是不用每次修改完代码都要重新执行一次webpack命令去打包，对于我们来说，改完就能实时打包并刷新页面是多么方便! 
建议也是全局安装：

?

1

npm install webpack-dev-server -g

安装完在命令行输入webpack-dev-server 
如果提示命令找不到就设置一下软连接：

?

1

sudo ln -s /opt/node-v6.9.2-linux-x64/bin/webpack-dev-server /usr/local/bin/webpack-dev-server

（webpack-dev-server是否全局安装可以到/opt/node-v6.9.2-linux-x64/bin/查看） 
webpack-dev-server 提供了两种模式用于自动刷新页面：

A:iframe 模式： 
工程目录向下命令行输入

?

1

webpack-dev-server

这种情况我们不访问 http://localhost:8080，而是访问 http://localhost:8080/webpack-dev-server/index.html 
B：inline 模式： 
工程目录向下命令行输入

?

1

webpack-dev-server--inline

在命令行中指定inline模式，这样 http://localhost:8080/index.html 页面就会在 js 文件变化后自动刷新了。

以上说的两个页面自动刷新的模式都是指刷新整个页面，相当于点击了浏览器的刷新按钮。 
至此，安装完成webpack！