webpack（一）安装

webpack（一）安装

1、安装node.js
命令node -v查看版本信息
2、安装npm
也可以使用淘宝镜像： npm i -g cnpm --registry=https://registry.npm.taobao.org
3、安装vue（可在cdm中也可在idea中，以IDEA为例）
在terminal（alt+f12）中输入以下命令
vue 脚手架 npm i -g vue-cli （若npm安装太慢，也可以使用淘宝镜像安装）
若是IDEA可以快捷安装 File - Settings - Plugins：搜索vue，安装Vue.js
**
4、在webpack下初始化结构（Vue环境下）
vue init webpack +项目名（自己命名） 回车

Project name（工程名）:回车
Project description（工程介绍）：回车
Author：作者名
Vue build（是否安装编译器）:回车
Install vue-router（是否安装Vue路由）：回车
Use ESLint to lint your code（是否使用ESLint检查代码，我们使用idea即可）：n
Set up unit tests（安装测试工具）：n
Setup e2e tests with Nightwatch（也是测试相关）：n
Should we run npm install for you after the project has been created? (recommended)：选择：No, I will handle that myself（按需选择）

输入框中的黄色字体


在浏览器中输入localhost:8080

至此，vue的环境是没问题的
5、安装webpack ，在webpack项目的根目录下进行(参数-g全局安装，下列图片步骤可不参考）
（1）在terminal中输入命令 npm install webpack -g 回车等待下载
（2）下载完成后安装webpack脚手架，输入命令全局安装。webpack4+ 需要安装cli
npm install webpack-cli -g 回车
npm install webpack-cli -D （等价于npm install webpack-cli -D） 回车
（3）以上都是在项目的根目录下进行，例如：项目myvue在E:/javaweb/VUE目录下，则安装cli的命令应是：E:/javaweb/VUE/myvue>npm install webpack-cli -g
webpack -v 查看webpack版本信息

6、为项目添加webpack依赖
在webpack项目根目录下（在本例中即my-vue下）输入命令：npm install --save-dev webpack@版本号。 操作完成后就会在package.json中添加指定webpack版本的依赖
注： 不能在项目根目录下输入该命令（本例中即myvue根目录下），否则在自动生引入plugin时会出错

7、资源打包
（1）首先将terminal的目录切换至需要打包的文件所在目录
（2）a.js 被打包的文件 b.js打包后输出的文件
低版本使用命令 webpack a.js b.js
4+版本使用命令 webpack a.js -o b.js
例子：a.js在E:/pack/app下 E:/pack/app>webpack a.js -o b.js


6、idea配置（择需配置）
（1） File - Settings - Languages&Frameworks - JavaScript：修改JavaScript language version为ECMAScript 6，确认
（2） File - Settings - Plugins：搜索vue，安装Vue.js (安装vue)
（3） Run - Edit Configurations…：点击加号，选择npm，Name为Dev，package.json选择你工程中的package.json，Command为run，Scripts为dev,然后就可以直接在idea中运行了。继续点击加号，选择npm，Name为Build，package.json选择你工程中的package.json，Command为run，Scripts为build,然后就可以直接在idea中打包了。