【Vue】Re09 Webpack 第一部分(介绍、安装、配置)

一、Webpack的用途

webpack要解决的是统一网页资源的问题

前端工程化出现了很多问题，就是兼容性，浏览器所不能解析

所以需要一个打包，转换等方式处理

二、安装描述介绍

下载安装NodeJS，此命令只是查看NodeJS版本

node -v

使用NodeJS提供的NPM包管理工具下载安装Webpack

npm install webpack@3.6.0 -g

写项目时使用局部安装：【注意当前工作目录】

npm install webpack@3.6.0 --save-dev

三、项目结构：

src — 【source】开发编写前端代码文件存放的目录
dist — 【distribution】编写完成将src资源打包之后生产的文件，存放的目录
index.html — 首页引用的样式文件，dist打包之后会加入此文件

在src中创建main.js文件和util.js文件

util表示工具的意思，可利用的

let sum = function (n1, n2) {
    return n1 + n2;
}
let multi = function (n1, n2) {
    return n1 * n2;
}

export default {
    sum, multi
}

而main.js则是导入util.js然后调用方法：

import util from "./util";
console.log(util.sum(22, 32));
console.log(util.multi(213, 219));

在终端执行打包命令：

webpack src/main.js dist/bundle.js

终端输出：

Hash: 9b8d8dcf03ad5dca65da
Version: webpack 3.6.0
Time: 152ms
    Asset     Size  Chunks             Chunk Names
bundle.js  3.15 kB       0  [emitted]  main
   [0] ./src/main.js 100 bytes {0} [built]
   [1] ./src/util.js 149 bytes {0} [built]

上面使用的是ES6模块化打包，

换成使用CommonJS的方式也是没有问题的：

let sum = function (n1, n2) {
    return n1 + n2;
}
let multi = function (n1, n2) {
    return n1 * n2;
}

module.exports = {
    sum, multi
}

CommonJS导入：

const { sum, multi } = require('./util.js');
console.log(sum(22, 32));
console.log(multi(213, 219));

四、webpack.config.js & package.json 文件配置

上述操作中我们使用了webpack 打包命令进行打包的

使用命令并不是很方便，所以webpack提供了配置文件的方式进行处理

webpack.config.js

const path = require('path'); /* 这里依赖一个path，这个path来自于npm的包中的一个模块，必须要有path包才能用 */
/* 所以需要装包 npm init */

module.exports = {
    entry : './src/main.js', /* 打包的程序入口 */
    output : { /* 打包输出的文件，出口路径 分为路径和文件名 */
        // path :  './dist', /* 路径可以动态获取 */
        path : path.resolve(__dirname, 'dist'),
        /* __dirname是一个全局变量 值是当前webpackconfig.js文件所在的绝对路径， cans参数二就是我们自定义的目录名称 */
        filename : 'bundle.js', /* bundle 意思打包 就是打包好的JS文件 */
    },
}

让npm对项目进行初始化

D:\Vue-Learn\CodeWhy\08-webpack\part1>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 init` 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. 下面出现的选项都按回车Enter下一步即可
package name: (part1)
version: (1.0.0)
description:
entry point: (webpack.config.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to D:\Vue-Learn\CodeWhy\08-webpack\part1\package.json:

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

Is this OK? (yes)

之后Npm就会生成一个JSON文件

package.json，内容就是上述命令中的JSON字符

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

如果package.json声明了项目的一些依赖，我们还需要安装package.json中描述的依赖

npm install

该命令会寻找package.json中描述的依赖进行下载，写入到本项目中

如果package.json没有依赖的信息，此命令执行也就等同没执行一样

命令映射处理：

/* 运行项目命令 npm run serve 打包（构建）项目命令 npm run build */
/* webpack 打包命令和 npm run build 进行映射 */

所以命令的配置可以在package.js中设置：

{
  "name": "part1",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1" ,  /* 对应npm run test命令的test */
    "build" : "webpack" /* build ->  npm run build  -> webpack 优先找本地webpack 包 */
  },
  "author": "",
  "license": "ISC"
}

注意当前webpack版本和全局webpack版本

在当前项目安装webpack

npm install webpack@3.6.0 --save-dev

安装完成之后多出的目录和文件：

我们安装的依赖都会存放在node_modules目录中，备注的信息是库目录的根

此外还多出一个package-lock.json

返回package.json就可以看到这个东西：

这个依赖不需要我们自己编写，根据命令安装的依赖自动写入

{
  "name": "part1",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.6.0"
  }
}

只要使用终端写命令webpack对项目打包的都是调用全局weback处理

使用npm run build就是使用本地当前项目的node_modules的webpack进行打包的

文件位置：

node_modules/.bin/webpack