Vue--webpack打包js文件

介绍

webpack是一个前端的静态资源打包工具，能让浏览器也支持模块化。它将根据模块的依赖关系 进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

官网：https://webpack.docschina.org/

webpack的作用有下面几点：

webpack核心主要进行javascript资源打包。

• 它结合其他工具， 将多种静态资源css、png、sass分类转换成一个个静态文件，这样可以减少页面的请求。
• 可集成babel工具实现EcmaScript 6 转 EcmaScript 5 ，解决兼容性问题。
• 可集成http服务器。
• 可集成模块热加载，当代码改变后自动刷新浏览器等等功能。

 安装

全局安装：

不推荐全局安装webpack，全局安装的webpack，在打包项目的时候，使用的是你安装在自己电脑上的webpack，如果项目到了另一个人的电脑上，他可能安装的上旧版本的webpack，那么就可能涉及到兼容性的问题。而且他如果没有在全局安装webpack就无法打包。

# 安装最新版本
npm install --global webpack

# 或者 安装特定版本
npm install --global webpack@<version>

如果上面安装的是  webpack v4+ 版本, 还需要安装 CLI , 才能使用 webpack 命令行

npm install --global webpack-cli 

可通过  npm root -g 查看全局安装目录

如果安装后，命令行窗口  webpack 命令不可用，则手动配置 全局目录的 环境变量

我的电脑 -> 右键属性 -> 高级系统设置 -> 高级 -> 环境变量 -> 系统变量 -> path ->在末尾添加上面的路径，记得前面用 ; 分号隔开

 然后再重新打开 cmd 命令行窗口，输入  webpack -v 即可使用

全局安装  webpack@v4.35.2 与  webpack-cli@3.3.6

npm i -g webpack@v4.35.2
npm i -g webpack-cli@3.3.6

安装后查看版本号。如果有红色字提醒，没关系忽略它

webpack -v

简单使用

新建目录结构如下：

 在webpack-demo2目录下执行下面代码打包js文件

E:vue
pm-demowebpack-demo2>webpack ./src/main.js -o ./dist/bundle.js

 ./dist/bundle.js表示将所有的js文件打包在dist目录下的bundle.js文件中，./src/main.js是所有js的入口文件

 webpack.config.js

每当修改js文件内容后，都要webpack重新打包，打包时要指定入口和出口比较麻烦，可通过配置解决

在  webpack-demo2 目录下创建  webpack.config.js 配置文件，该文件与  src 处于同级目录

在webpack.config.js里写如下配置

// 引入node中的path模块，处理文件路径 的小工具
const path = require('path')

// 导出一个webpack具有特殊属性配置的对象
module.exports = {
    mode: 'none', // 指定模式配置："development" | "production" | "none"
    // 入口
    entry: './src/main.js', // 入口模块文件路径 
    // 出口
    output: {
        // path: './dist/', 错误的，要指定绝对路径
        path: path.join(__dirname, './dist/'), //打包的结果文件生成的目录要是绝对路径
        filename: 'bundle.js' 
    }
}

然后就可以执行下面的命令进行打包了，不需要再输入入口和出口了

webpack

如果没有mode参数，则会出现黄色警告。

本地安装

本地安装的时候，建议把webpack安装到devDependencies 开发依赖 ( --save-dev ) 中，因为 webpack 只是一个打包工具，项目如果需要上线，上线的是打包的结果，而不是这个工具。

所以我们为了区分生产环境和开发环境依赖，通过  --save （生产环境）和  --save-dev （开发环境）来区分。

为了测试本地安装，先把全局安装的  webpack 和  webpack-cli 卸载掉

npm uninstall -g webpack
npm uninstall -g webpack-cli

在webpack-demo2中，使用npm init -y 初始化，会生成一个package.json的文件，后面要用到。

本地安装命令

# 安装最新版本
npm install --save-dev webpack  
# 安装特定版本
npm install --save-dev webpack@<version>

如果上面安装的是  webpack v4+ 版本, 还需要安装 CLI , 才能使用 webpack 命令行

npm install --save-dev webpack-cli

# 1. 进入到 webpack-demo2
cd e:vue
pm-demowebpack-demo2

# 2. 初始化项目 `-y` 是采用默认配置
npm init -y

# 3. 安装 v4.35.2 ，不要少了 v
npm i -D webpack@v4.35.2

# 安装 CLI
npm i -D webpack-cli@3.3.6

安装完执行webpack -v会报错

 在本地安装的  webpack ，要通过在项目文件夹下  package.json 文件中的  scripts 配置命令映射

"scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "show": "webpack -v",
    "start": "node ./src/main.js",
    "build": "webpack"
  },

然后查看版本号就使用下面的命令

npm run show

运行 main.js 模块：

npm run start

注意：如果命令映射的别名是  start ，可省略  run 进行简写执行，即：

npm start

打包构建

npm run build

 自动打包

前面我们修改了代码之后，都要手动打包，这样很浪费我们的时间，那我们想当我们修改了代码之后能不能自动帮我们完成打包，答案当然是可以的，只需要在package.json的script里加上watch参数就可以了

 "scripts": {
    "test": "echo "Error: no test specified" && exit 1",
    "show": "webpack -v",
    "start": "node ./src/main.js",
    "build": "webpack",
    "watch": "webpack --watch"  // 加上这个就可以自动帮我们打包了
  },

添加上watch参数之后，在命令行执行npm run watch，程序会阻塞状态，当我们更改代码之后，自动会帮我们完成打包

导入导出模块

上面我们的webpack-demo2下有个src文件夹，里面有两个js文件，一个是bar.js，一个是main.js。main.js是主入口，引用了bar.js文件，既然要用到bar.js里的，那我们就要在bar.js里导出，然后再main.js里导入

导出默认成员

默认成员只能有一个，要不然会报错。

export default 成员

bar.js

// ES6 注意 一个模块文件中，只能导出一个默认成员，注释掉一个
export default function() {  // 导出函数
    console.log('我是bar模块--ES6')
}


export default { // 导出对象
    name: '邹邹'
}

要在main.js文件里使用bar.js文件里的内容，还要在main.js里导入

main.js

// Es6 导入默认成员
import bar from './bar'

bar()  // 调用函数


console.log(bar)
console.log(bar.name)  // 对象的属性值

导出非默认成员

默认成员只能导出一个，非默认成员可以导出多个。

非默认成员必须要有成员名称

bar.js

// ES6 可以导出多个非默认成员
export const x = 'xxx'
export var y = 'yyy'

export function add (a, b) {
    return a+b
}

// export z = 'zzz' 错误的，没有数据类型
// export 'wwww' 错误的，没有变量名和类型
// export function (x, y) { 错误的，没有函数名
//     return x+y
// }

main.js

// Es6 导入非默认成员
// 通过 解构赋值 的方式 来加载成员
// x 对应的是bar.js 模块中的 x 成员 ，y对应y成员，ad对应add成员 函数
import {x, y, add} from './bar'
console.log(x, y, add(10, 20))

// 通过解构赋值按需导入你需要的成员 
import {x, y} from './bar'
console.log(x, y)

// 会将默认成员 与 非默认成员 全部导入
import * as bar2 from './bar'
console.log(bar2, bar2.x, bar2.y, bar2.add(1,2))