webpack少走弯路系列

webpack少走弯路系列

---

一、先下载node.js

webpack基于 node.js ，所以得先下载它。
node.js官网

直接点击，傻瓜式安装（一直 next ，建议记得换个位置安装）。

二、检查安装是否成功

cmd 命令，输入node -v

如图已安装成功。
如果不成功，则重启下电脑。如若还是不行（几率很小），卸载重装。

三、全局安装nrm包

cmd 命令，输入npm i nrm -g。
安装完输入nrm ls查看当前所有可用的镜像源地址以及当前所使用的镜像源地址。
输入nrm use taobao切换不同的镜像源地址。

红色为国内地址（网速快，推荐切换）。

四、全局安装webpack

注意：安装webpack运行npm install -g webpack，下载的是最新版本的webpack，对于语法要求更加严格，这里不建议。我们选择安装中低版本，例如npm install -g webpack@3.6.0.

五、运行项目Vue的cmd命令框

1.开始做项目了，首先要运行

npm init -y初始化项目。

2.引入npm

运行npm i jquery -s

3.假如需要引入jQuery.js，则运行npm i`。

4.重置（及刷新）js

运行webpack .\src\main.js .\dist\bundle.js。当我们再次修改 js 时，需要再次运行一次。

5.简化上一步

每次都要输入路径，麻烦且易出错。
在项目根路径下新建 webpack.config.js。

const path = require('path')
module.exports={
    entry:path.join(__dirname,'./src/main.js'),
    output:{
        path:path.join(__dirname,'./dist'),
        filename:'bundle.js'
    }
}

即确定输入文件和输出文件，之后每次需要刷新只需运行webpack即可。

6.及时刷新

若需要边修改边查看效果，特别对于前段人员来说，这是我们需要用到 webpack-dev-server 来实现实时刷新。需要借助于 package.json 文件中的指令，来进行运行 webpack-dev-server 命令，在 scripts 节点下新增"dev": "webpack-dev-server"指令，然后运行npm i webpack-dev-server。

7.运行整个项目

运行npm run dev
如图成功了。不过我相信应该有一部分新手可能不会这么顺利，接下来将一下一些坑。
当我们运行到最后一步出错时，可以看下出错信息，别忙着百度红色错误字体，因为那是普遍错误方式，很难百度到正确方法。

如错误信息红色框，提示我们少了webpack-cli，我们根据他的提示，按照照片上的命令，输入npm i -D webpack-cli。

接着再运行npm run dev就成功了。

六、跳转页面方法

1.点击 cmd 中链接

手动点击太 low 了，我们让他自动打开。

2.自动跳出

修改 scripts 节点下的"dev": "webpack-dev-server --open"指令即可实现自动打开。"dev": "webpack-dev-server --open --port 3000"则可切换成3000端口来运行。

七、总结

webpack 基于node.js，建议还是先看看node.js再深入学习它。不过上面的一些基本语句却是要牢记的。