Vue基础技术|vue-loader+webpack项目配置

项目初始化

首先需要创建一个空目录vue-demo，然后通过命令行进入该目录后，执行npm init指令来初始化为一个npm的项目，基本选项都可以选择默认值即可，初始化完成后会在当前目录下生成一个package.json文件，该文件是项目的配置文件。

➜  ~ cd Documents/workspace/vue-demo
➜  vue-demo pwd
/Users/a1/Documents/workspace/vue-demo
➜  vue-demo npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (vue-demo)
version: (1.0.0)
description: vue demo
entry point: (index.js)
test command:
git repository:
keywords:
author: mj
license: (ISC)
About to write to /Users/a1/Documents/workspace/vue-demo/package.json:

{
  "name": "vue-demo",
  "version": "1.0.0",
  "description": "vue demo",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "mj",
  "license": "ISC"
}


Is this OK? (yes) yes

安装项目依赖包

首先，我们需要安装的依赖包是vue和webpack，我们可以通过npm install指令来安装我们需要的依赖包，并且可以一次安装多个包，多个包之间需要使用空格分隔即可，此处使用的webpack3.10.0版本，因此需要在安装的时候通过webpack@3.10.0指定版本即可。

➜  vue-demo npm install webpack@3.10.0 vue@2.5.13 vue-loader@13.6.0

> fsevents@1.2.9 install /Users/a1/Documents/workspace/vue-demo/node_modules/fsevents
> node install

node-pre-gyp WARN Using needle for node-pre-gyp https download
[fsevents] Success: "/Users/a1/Documents/workspace/vue-demo/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" is installed via remote

> uglifyjs-webp