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：

sudo apt-get update
sudo apt-get install nodejs

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

sudo apt-get autoremove --purge nodejs
sudo apt-get autoremove --purge npm

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

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

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

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

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

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

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

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

node -v    //6.9.2
npm -v    //3.10.9

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

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

npm install webpack -g

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

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命令去打包，对于我们来说，改完就能实时打包并刷新页面是多么方便!
建议也是全局安装：

npm install webpack-dev-server -g

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

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 模式：
工程目录向下命令行输入

webpack-dev-server

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

webpack-dev-server --inline

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

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

Ubuntu安装webpack相关推荐

Ubuntu安装MongoDB
https://jingyan.baidu.com/article/e5c39bf5f5ddd539d76033a9.html Ubuntu安装MongoDB4.0: https://www.jian ...
linux怎么卸载webpack,安装webpack后，执行webpack -v命令时报错：SyntaxError: Block-sc
安装webpack后,执行webpack -v命令时报错如下: [root@FreeServer ~]# webpack -v /usr/local/node-v4.4.7-linux-x64/lib ...
ubuntu安装OpenCV详细教程（建议收藏）
记录一篇"如何安装ubuntu下C++接口的opencv"的文章.由于转载格式有问题,直接贴个链接:ubuntu安装opencv的正确方法注意:本人根据此博客安装遇到的问题:2. ...
Linux/ubuntu 安装 redis 4.0报错解决：redis-server.service: Can't open PID file /var/run/redis/redis-server.
此文首发于我的个人博客:Linux/ubuntu 安装 redis 4.0报错解决:redis-server.service: Can't open PID file /var/run/redis/r ...
debian,ubuntu 安装mongodb 允许外网访问，修改端口，设置用户和密码
使用apt安装mongodb: apt update && apt install mongodb 查看运行状态: systemctl status mongodb.service 结 ...
ubuntu安装KVM
ubuntu安装KVM 现在官网下载ubuntu镜像,桌面版或者服务端都可,这里以桌面端为例. 安装之前确保磁盘有足够大的空间(这很重要) 安装KVM sudo apt install qemu-kv ...
解决Ubuntu安装依赖问题
解决Ubuntu安装依赖问题解决Ubuntu安装依赖问题最主要问题,修改的国内镜像源可能不是对应的ubuntu版本,大部人直接找了个镜像源就复制到source.list里面了,其实需要对应版本的, ...
Ubuntu安装Ceres库-安装依赖时报错：E：无法定位软件包 libcxsparse3.1.2_朱国鑫的博客-CSDN博客
Ubuntu安装Ceres库-安装依赖时报错:E:无法定位软件包 libcxsparse3.1.2_朱国鑫的博客-CSDN博客
ubuntu 安装Pangolin 过程_余辉亮的学习笔记的博客-CSDN博客_pangolin安装
ubuntu 安装Pangolin 过程_余辉亮的学习笔记的博客-CSDN博客_pangolin安装

Ubuntu安装webpack

Ubuntu安装webpack相关推荐

最新文章

热门文章