VUE-CLI学习第一天

webpack基础

安装node

检查是否安装node

@~ node -v

全局安装webpack(此处为3.6.0版本)

@~ npm install wepack@3.6.0 -g

开发依赖webpack安装(在项目文件夹cmd运行)

@~ npm install wepack@3.6.0 --save-dev

• 安装完后会出现node_modules文件夹
• package.json中增加"devDependencies"属性，代表开发依赖环境

依赖环境打包命令

@~ ./node_modules/.bin/webpack

commmonjs规范模块化

导出

module.exports = {
    函数名，
    函数名
}

导入

const {函数名，函数名} = require('./文件名')

es6规范模块化

导出

export const 变量名 = ""

导入

import {变量名，变量名} from "./文件名（不加后缀）"

webpack基本使用

打包（模块的依赖不用考虑，简单打包）

项目目录下输入

@~ webpack ./要打包的文件 ./产出的文件名

项目化打包

生成package.json文件

@~ npm init

建立webpack.config.js文件

const path = require('path')

module.exports = {
    entry : './src/main.js',  //要打包的文件
    output:{                    //输出打包的文件
        path : path.resovle(__dirname,'dist'),  //动态绝对路径
        filename : 'test.js'   //文件名
    }
}

此时可用webpack命令直接打包

@~ webpack

修改package.json

在"scripts"添加"bulid"命令

  "scripts": {  //脚本
    "test": "echo \"Error: no test specified\" && exit 1",
    "bulid": "webpack"
  },

之后就可以直接使用npm run bulid进行打包

@~ npm run bulid