A. mac下使用npm run dev（webpack）端口占用问题
在使用webpack进行打包过程中，我们使用npm run dev运行项目，当我们使用control+c时并不能真正的关掉进程，导致毁世项目端口被占用，下次用同样的项目就是报错
以下是解决方法：
方法一：纤铅肢lsof -i tcp:xxxx 命令可以查激首看xxxx端口所对应的pid，然后使用kill命令
kill xxxx
kill -9 xxxx 强制删除
方法二：mac下启用活动监视器，可以在活动监视器右上角搜索栏输入node，就会出现相关的进程，选中之后，选择强制退出（本机尝试退出无效，所以点击强制退出）
B. webpack安装步骤及文件
1.检查是否有安装npm。
在windows系统下，同时按下windows+R调出命令，输入CMD，如下图：
图1
打开命令工具，输入命令：npm -v
如下图：
图2
图中显示了5.6.0说明已经安装了npm，显示的5.6.0是npm的版本，如果没有安装的话就要先去安装一下npm之后再继续接下去的操作；
2.进入项目文件夹并册举搜生成package.json文件。
新建一个空文件newitem，如下图：
图3
然后用命令工具进入这个新项目的空文件夹，然后再输入npm init，如下图：
图4
3.为项目添加webpack依赖。
在命令工具中州历输入命令：npm install webpack --save-dev
如下图：
图5
完成以上操作之后你会发现你新建的项目文件里面多了一些文件，如下图：
图6
4.新建webpack.config.js配置文件。
图7
接着就可以通过package.json文件中的scripts来启动不同的服务，而webpack.config.js文件是用来设置webpack相关服务内容的。
下一篇文章再具体讲解如何在webpack.config.js之中进行答灶各种配置了。
C. Mac webpack 安装报错 permission denied, mkdir '/usr/local/lib/ vue-cli初始化项目
解决派族滑办法
sudo npm install webpack -g
或
sudo npm install webpack -g --unsafe-perm=true --allow-root （我用的此方法）
或
sudo npm install webpack -g --unsafe-perm=true
webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
翻译过来就是： 'webpack-dev-server' 不是内部或外部命令，也不是可运行的程序
很尘腊可能是项目 install 时不完全造成的， 可以使用 cnpm install 境内安装
项目初始化时最后会让你选择是否install和install途径， 最好是选择稍后手动安装 cnpm install
刚拿到项目时， npm start 或npm run dev 包这个错 先执行cnpm install 安装依赖文件
都是图、都是图 😂😂😂😂😂
项目穗搏初始化参考：
https://www.jianshu.com/p/1626b8643676
D. 安装webpack后还是提示webpack不是内部命令
因为安装步骤出现了问题。
1.首先你需要安装一个全局的webpack；
npm install webpack -g；
这样你才可以正确的使用webpack这个命令；
2.然后, 你还可以在当前项目里面也安装一个webpack, 这也是官方推荐的做法；
npm install webpack --save-dev；
这样就仿睁可以在你的webpack.config.js里面方便的引用webpack；
// webpack.config.js；
var path = require('path');
var webpack = require('webpack');
3.然后在使用一些plugin的时候就比较方便了；
new webpack.optimize.CommonsChunkPlugin('common.js')。
E. 如何在电脑上安装webpack
webpack 学习：
一：安装：
1.webpack 是基于滚碧nodes.js的，
a.先安装node.js
下载node.js的程序。点击安装node.js
b.安装完后.打开cmd的窗口；快捷键（window + r 组合键）
3
c.根据项目所在路径盘安装webpack；如项目是在F盘，则安装方法如下：
1.指定在F盘安装：输入F： 回车
4
2.全局安装：输入npm install webpack -g 回车 成功大缺举出现如下：
5
3.进入项目所在路径安装配置文件：package.json
如项目路径：找到路径 cd .....
6
则cmd输入：路径找到之后 输入 npm init 回车 开始配置文件；
7
开始配置的文扮此件过程如下：出现之后只要回车即可：
F. webpack基本使用
step1: 创建一个项目录
注意：项目名一般 不要带中文
step2: 创建 package.json
或者：
step4: 处理第三方文件
html文件中需要引入多个js文件或者第三方模块(例如：jquery.js)，只引入项目js入口文件( main.js ),其他js文件均在入口文件中导入。导致可能JS文件中使用了浏览器不薯早识别的高级语法:
总结：webpack可以做两件事情况：
step5: 配置入口文件和出口文件
每次修改js文件，手动输入命令： webpack 入口文件路径 -o 出口文件路径 重新打包， 每次都要输入入口文件和宏锋出口文件，麻烦。可以在项目目录下建立配置文件 webpack.config.js ,指定入口文件和出口文件:
重新打包：
step6: 实现自动打包编译
每次修改js文件，都要手动重新打包，还是麻烦？使用 webpack-dev-server 这个工具，来实现自动打包编译的功能。
webpack-dev-server 这个工具，如果想要正常运行，要求在本地项目中必须安装 webpack
在 package.json 文件中配置命令：
在终端中执行命令：
注：在终端执行 npm run dev ，就等于执行 webpack-dev-server 命令。这将在node中开启一个服务器，并且立即打包。每次修改文件，ctrl + s 保存文件,webpack-dev-server工具自动监听文件改变，并且自动打包。
改变文件引用路径：
执行上述命令后终端会有类似信息输出：
【 Project is running at http://localhost:8080/ 】——webpack-dev-server工具将项目托管到localhost:8080/端口上
【webpack output is served from /】——打包好的文件通过localhost:8080/bundle.js访问
【Content not from webpack is served from C:UsersyfbDesktop前端学习案例4.27wabpackDemo_1src】——不是通过webpack打包的文件，则是以src为根目录访问。
该项目根目录下并不存在bundel.js文件，我们可以认为webpack-dev-server把打包好的文件，以一种虚拟的形式托管到了咱们项目的根目录中，虽然我们看不到它，但是可以认为和 dist、src、node_moles平级，有一个看不见的文件，叫做 bundle.js。其实是为了频繁打包，提高效率，直接把打包的文件放在内存中。
因为项目托管到新服务器，现在应该访问的是 该服务器 下的项目，文件引用路径也要改变:
step7: 自动打开浏览器进行访问、配置端口号、指定托管的根蔽手晌目录、热重载（只是修改补丁，不重新生成整个bundle.js文件）
在 package.json 中配置命令，并重启服务器：
step8: 使用 html-webpack-plugin 插件
使用 --contentBase 指令的过程比较繁琐，需要指定启动的目录，同时还需要修改index.html中script标签的src属性。
安装 html-webpack-plugin 插件：
在 webpack.config.js 配置文件中配置插件：
html-webpack-plugin 插件的两个作用：
step9: 处理样式文件
html文件中需要引入css、less、sass样式文件。默认情况下，webpack处理不了这些样式文件。
处理css文件：
处理less样式文件
G. 全局 安装webpack 本地工程 怎么调用
看看webpack官网, 比installation章节, 面介绍安装webpack.
首先需要安装差桐全虚纳坦局webpack
npm install webpack -g
才确使用webpack命令
, 前项目面安装webpack, 官推荐做茄正
npm install webpack --save-dev
自webpack.config.js面便引用webpack
// webpack.config.js
var path = require('path');
var webpack = require('webpack');
使用些plugin候比较便
new webpack.optimize.CommonsChunkPlugin('common.js')
H. Mac 系统配置Vue开发环境
首先安装nodejs
终端输入：brew install nodejs 或者直接官网手动春源世安装。 node -v 查看 nodejs版扒肢本
注：网上说使用终端安装会需要nodejs模块安装目录的权限，运行：sudo chmod -R 777 /usr/local/lib/裂饥node_moles/
3、安装npm （淘宝镜像）
终端输入：npm install -g cnpm --registry=https://registry.npm.taobao.org
4、安装webpack
cnpm install webpack -g
5、安装vue脚手架（自动搭建vue项目框架的工具）
sudo npm install -g vue-cli。静待。
输入vue或者vue list，可vue是否安装成功。
I. webpack配置
一个打包工具
npm install --save-dev webpack : 安装Webpack
npm install webpack webpack-cli --save-dev :此工具用于在命令行中运行 webpack
webpack 开箱即用，可以无需使用任何氏毕返配置文件。webpack 会假定项目的入口起点为 src/index.js ，然后会在 dist/main.js 输出结果，并且在生产环境开启压缩和优化。
在package.json文件中添加命令，然后通过npm run build即可运行打包
但是通常项目还需要继续扩展此能力，为此可以在项目根目录下创建一个 webpack.config.js 文件数旁，然后 webpack 会自动使用它。
也可以根据特定情况使用不同的配置文件，则可以通过在命令行中使用 --config flag 修改此配置文件名称。
每个html页面都有一个入口点，单页面应用：一个入口起点；多页面应用：多个入口起点
mode?: "development" | "proction" | "none";
。。。。。
（webpack 提供合理的默认值，但是还是可能会修改一些解析的细节）
条件的输入值由两种，
在条件中，对 resource 进行匹配的属性有 test / include / exclude / resource
在条件中，对 issuer 进行匹配的属性有 issuer
注：当使用歼饥多个条件属性时，需要同时满足，当属性条件为数组时，满足数据中的一个即可
可以对匹配规则的模块进行 应用loader 或者 解析选项对象
oneOf?: RuleSetRule[];
rules?: RuleSetRule[];
webpack配置示例：
J. webpack安装失败，请问这样要怎么解决
可以看看webpack的官网的, 比如在installation这个章节, 里面就介绍了怎么安装webpack.
首先你需要安装一个全局的webpack
npm install webpack -g
这样你才可以正确的使用webpack这个命令
然后, 你还可以在当前项目里面也安装一个webpack, 这也是官方推荐的做法
npm install webpack --save-dev
这样就可以在你的卜衫webpack.config.js里面方便的引用webpack
// webpack.config.js
var path = require('path');
var webpack = require('webpack');
然后在使用一些plugin的时候就比较方便了
new webpack.optimize.CommonsChunkPlugin('common.js')
或者你可以看看webpack的官网的, 比如在installation这个章节,
里面就介绍了怎么安装webpack. 首先你需要安扰弊做装一个全局的webpack npm install webpack -g
这样你才可以正确的使用webpack这缓衡个命令 然后, 你还可以在当前项目里面也安装一个webpack, 这也...