打包工具webpack安装·Mac

Posted 2021-02-03 eightflying

 

　　最近在学Vue.js，是我接触的第一个前端框架。本来感觉还不错，各种惊叹于它可以用很少的代码写出那种具备交互能力的神奇模块。

    在学的过程中总是能碰到一个叫webpack的单词，查过，是一个模块打包器，由于Vue的官方文档总是很温馨的提示说要是以前没接触过这个，可以暂时跳过，所有一直都没深入去了解。

    可是当我学到一个叫单文件组件的东西的时候，发现不去了解webpack真的寸步难行，于是……今天炸了一天??，因为mac系统的操蛋特性（不全是），就单单是安装webpack这一个操作跳出的error数量真的一言难尽……

 

 

---

进入正题：

【安装】：

1. 前往Node.js的官网下载并安装它。（建议选择LTS版本，以前了解过这个也是一个前端框架，是用来在服务器端使用JS的，需要借助它的npm来安装webpack）

2. 查看webpack官方文档，说是建议采用本地安装，兜兜转转我最终还是用了全局安装，输入以下命令：

   sudo -s

   npm install webpack -g

   （sudo -s是为了获取安装权限，不使用它会出现一大堆error，然后安装完之后会有一些警告，不用管，那个貌似是说缺少一些组件）

3. 千万不要以为现在就能进行打包了，打包命令都是以webpack开头的，现在进行打包会报错：Command not found要想能够使用webpack命令，还得安装CLI：

   npm install -D webpack-cli

   （注意：必须在上一步产生的webpack文件夹中运行指令，路径user/local/lib/node_modules/webpack）

4. 这个时候仍然无法运行webpack命令，会报错：Cannot find module ‘webpack‘，运行一下指令即可解决：

   npm link webpack

5. 现在可以正常使用webpack了，如：

   webpack ./main.js --output ./dist/bundle.js

   （相关知识查阅webpack官网）

---

测试过，可以正常打包了，可是要想结合Vue使用单文件组件，还得安装一些loader，目前处于崩溃状态，怎么弄都不好使????之后再研究吧