Vuejs10--webpack

webpack:

是一个现在的JavaScript应用的静态模块-打包工具
模块的规范化，常见的规范化有CommonJS、AMD、CMD和ES6的Modules
浏览器只支持ES6的Modules模规范化，webpack则可以CommonJS、AMD、CMD打包成浏览器支持的模块规范化

webpack 、node、 npm 关系

webpack正常运行必须依赖node运行环境；
node为了可以正常运行很多代码，其中必须包含各种依赖包；
npm工具(node packages manager) 来管理各种包（在安装node会自动安装npm）
webpack 全局安装
cmd下

npm install webpack@版本号 -g(全局)

查看版本：

webpack -v

## 目录文件
dist:打包后的文件
src:开发时的文件
webpack 打包：
将main.js 打包到dist下成为bundle.js文件

webpack ./src/main.js ./dist/bundle.js

改进上面的命令行，直接webpack打包即可
固定文件名
webpack.config.js：

module.exports={
    entry:'./src/main.js',   // 入口
    output:{
        path:'./dist',    // 出口路径
        filename:'bundle.js',  // 文件名
    }
}

报错 The provided value “./dist” is not an absolute path!
导入node中的path模块获取项目的绝对路径
1、const path=require(‘path’)–需要用到node东西
npm init 来初始化
生成package.json文件
当pacgage中存在依赖 -----npm install 加载
path.resolve(__dirname,‘dist’) ：获取项目绝对路径并且拼接

const path=require('path')
module.exports={
    entry:'./src/main.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js',
    }
}

npm run 命令参数

package.json文件：

scrpits:执行的脚本配置—首先会去本都node-modules/bin下面去查找，当本地没有是才去全局环境下查找
配置build:‘webpack’
执行 npm run build------去执行webpack，其会首先从本地项目去找webpack,当本地项目（局部）没有时再去找全局的webpack,一般都会先安装局部webpck,因为你的同事webpack版本有可能和你不一致，通过安装局部webpack来保持一致
安装剧本webpack
npm install webpack@版本 --save-dev(开发时依赖)

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