初学安装webpack && bug (windows7)

淘宝镜像 npm install -g cnpm –registry=https://registry.npm.taobao.org
cnpm（淘宝镜像）相关：
①这是一个完整 npmjs.org 镜像，是用来同步npm上面的模块。
②cnpm的同步频率为 10分钟 （新发布的模块有滞后性，同步是需要时间的，等不及的可以使用npm）。
③安装cnpm的原因：npm的服务器是外国的，所以有时候我们安装“模块”会很很慢很慢超级慢。
④cnpm的作用：淘宝镜像将npm上面的模块同步到国内服务器，提高我们安装模块的时间。
⑤安装完淘宝镜像之后，cnpm和npm命令行皆可使用，二者并不冲突

1.安装webpack——install -g webpack 或者 install webpack -g
查看nodejs和npm版本,cms -> node -v -> npm -v
安装nodejs的最新版本，最好的方式是在nodejs官网下载 .msi，覆盖旧版本
或者npm install webpack –save-dev
–save：模块名将被添加到dependencies，可以简化为参数-S。 –save-dev: 模块名将被添加到devDependencies，可以简化为参数-D。
再去查看package.json，会发现多了一项
“devDependencies”: {
“webpack”: “^4.1.1”
}
①插件问题
报错信息：

解释：
fsevents这个插件只能在mac上安装
1> 安装webpack插件html-webpack-plugin——npm install html-webpack-plugin –save-dev
这个插件是用来简化创建服务于 webpack bundle 的 HTML 文件，尤其是对于在文件名中包含了 hash 值，而这个值在每次编译的时候都发生变化的情况。
②找不到文件问题
报错信息：

解释：找不到package.json文件
解决方法：npm init 这行命令，其实应该在最前面的时候就执行
③webpack找不到版本号
报错信息：

解释：
意思是CLI被移动到了一个专门的包 webpack-cli里了。
请安装webpack-cli 的除了webpack本身使用cli
当用npm时，使用npm install webpack-cli -D安装。
当用yarn时，使用yarn add webpack-cli -D安装。
解决方法：npm install webpack-cli -g（全局安装webpack-cli手脚架）
④package.json文件配置 scripts ， 通过设置scripts，可以使NPM调用一些命令脚本，封装一些功能。
报错信息：package.json文件里，有一行标点错误

解决之后：

多了一行——”webpack” : “./node_modules/.bin/webpack/app/index.js /bundle.js”
脚本命令设置：
1>npm run dev 会执行你定义的命令行
添加命令：”dev”: “webpack-dev-server –inline –hot –open –port 5008”
结果：

浏览器上展示效果

说明webpack配置成功
⑤npm install wekpack-dev-server
如果用的是webStrom，webpack-dev-server是不需要的，因为webStrom内置了服务，如果是其他编辑器，要自己配置webpack-dev-server启动服务

2.安装vue
1>vue npm install vue -> vue -v
2>vue-cli cnpm install vue-cli –save
npm install vue-cli –save 安装会报权限不足的错，所以用淘宝镜像安装，
检查是否安装成功——vue -V（注意：这里是大写的V）
3.安装babel（借鉴与一个小哥哥的文档）JavaScript 语法的编译器
npm install babel-cli –save
npm install babel-preset-es2015 –save
测试是否安装成功：在目录下新建文件es6.js

经过编译后的结果：

　注：后面的参数–presets es2015表示使用该插件进行编译，如果不写上转换是没有效果的。
　插件配置

　配置相关的内容：
　1>Babel的配置文件是.babelrc，存放在项目的根目录下。所以在当前目录下新建配置文件 .babelrc
　
　该文件用来设置转码规则和插件，基本格式：
　{
　　　“presets”: [‘es2015’,’modules’:false] //该字段设定转码规则
　　　“plugins”: [] //配置插件
　}
　　那么就可以直接在命令行中使用babel es6.js进行转换而无需添加表明所用插件的参数

　2> 也可以在package.json中进行配置，添加以下：
“babel”: {
　　“presets”: [“es2015”]
}
有关babel的详细内容见
Babel 入门教程 —— http://www.ruanyifeng.com/blog/2016/01/babel.html
babel之配置文件.babelrc入门详解 —— http://www.jb51.net/article/135225.htm

大神安装文档：一步步构造自己的vue2.0+webpack环境——https://www.cnblogs.com/wj204/p/6031435.html
4.安装webpack插件html-webpack-plugin
用来简化创建服务于 webpack bundle 的 HTML 文件，尤其是对于在文件名中包含了 hash 值，而这个值在每次编译的时候都发生变化的情况。

继续更……