webpack打包工具

---

前言

简介：webpack是node的第三方模块包，用于打包代码，缩小项目体积，提高项目加载速度，很好的解决了项目中的每一个请求都要消耗资源和时间的问题。同时能够完成语法降级（es6->es5），解决部分浏览器不支持新语法的问题，但是程序员又觉得es6很香的问题。基于yarn包管理工具和es6模块化语法¹，本文介绍了webpack的使用方法。

一、yarn包管理工具

yarn包管理工具，是npm的升级版，下载速度比npm快上很多，打包代码的时候，更推荐使用yarn，体验更好。

1. 在node环境中安装yarn管理工具
   npm install -g yarn
2. 检查yarn版本
   yarn -v
3. 初始化包环境，生成package.json,用来记录下载的包名和版本号
   yarn init
4. 添加包 指定版本的包
   yarn add [package]
yarn add [package]@version
5. 移除包
   yarn remove [package]
6. 安装项目全部依赖（一般拿到别人的项目时，缺少node_modules,会根据package.json记录的包名和版本全部下载到当前的项目中）
   yarn
7. 全局安装 卸载 【注意: global一定在add左边】
   yarn global add [package]
yarn global remove [package]

二、webpack

1.webpack的基本概念

webpack官网

• webpack本身是node的一个第三方模块包，用来打包代码。
• javascript应用程序的静态模块打包工具。
• webpack作用：①打包整合项目文件，缩小项目体积，提高加载速度。②也能够实现语法降级，webpack打包之后es6/7/8会降到es5。③支持vue单页面程序。

2.webpack的使用步骤

2.1webpack的基本使用

【演示】：将项目文件夹下的src文件夹中的两个js文件合并到1个js文件中，并输出到dist文件中。

【目录结构说明】：
./dist文件夹用来存放分发代码，分发代码是指在构建过程中，经过最小化和优化后产生的输出结果，最终将在浏览器中加载。
.src文件夹用来存放源代码。

【webpack默认出入口】：
默认入口: ./src/index.js
默认出口: ./dist/main.js
注意:路径上, 文件夹, 文件名不能叫webpack/其他已知的模块名。

【初始代码环境准备】：
1.在项目文件夹下新建src目录，新建hello/hello.js,导出

export const sayHI = ()=>{console.log('hello');}

2.新建src/index.js,导入sayHI方法

impprt {sayHI } from ‘./hello/hello.js’;
sayHI();

【webpack打包工具使用】：

1. 初始化包环境
   yarn init
2. 安装webpack模块包
   yarn add webpack webpack-cli -D
3. 配置package.json文件(自定义命令，用于将webpack命令替换为bulid，设置之后运行yarn build 就相当于运行 yarn webpack)
   “script”:{ "build":"wepack"}
4. 运行命令，打包文件
   yarn build
5. 如果源代码发生改变，更新打包
   yarn bulid

【演示测试】：
demo的结果的是将两个js文件输出为一个，直接查看dist文件夹下生成的js文件即可。

【webpack打包后的包的使用方法】:
将打包后的js文件，手动引入index.html文件中，运行查看结果。

<script src="../dist/index.js"></script>

注意：推荐将scrip标签放到head标签中，放到body标签中的话，如果之后需要操作dom元素添加到body中容易出错。

2.2webpack的配置

1.入口和出口的文件的配置

【配置package】：根目录新建webpack.config.js（默认配置文件名）：

//导入node的内置路径模块
const path = require("path");

//导出配置信息
module.exports = {
    entry: "./src/main.js", // 入口
    output: { 
        path: path.join(__dirname, "dist"), // 出口路径
        filename: "bundle.js" // 出口文件名
    }
};

【yarn build执行流程】:

重点: 所有要被打包的资源都要跟入口文件产生直接/间接的引用关系

2. 打包自动生成html文件

使用 html-webpack-plugin 插件，在dist文件夹中自动生成html文件

1. 安装插件
   yarn add html-webpack-plugin -D
2. 配置webpack.config.js文件

// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    // ...省略其他代码
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html' // 以此为基准生成打包后html文件
        })
    ]
}

3 加载器–加载除js文件其他类型的文件

引入loaders的原因：webpack默认只能处理js文件
loaders
style-loader
css-losder

【以加载css文件为例说明使用步骤】：
1.下载css-losder yarn add css-loader style-loader -D
2.配置webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/, //处理.css结尾的文件
        use: [ 'style-loader', 'css-loader' ]  //使用这两个加载器
      }
    ]
  }
}

【常用加载器】：

• less-loader
• asset-modules处理图片文件、处理字体文件

3.webpack开发服务器

启动本地服务, 可实时更新修改的代码, 打包变化代码到内存中, 然后直接提供端口和网页访问。
1.监控项目源代码
2.一旦监听到源代码发生改变，会自动编译，并保存。

1.下载包：yarn add webpack-dev-server -D
2.配置package.json

scripts: {
	"build": "webpack",
	"serve": "webpack serve"
}

3.启动webpack服务器 yarn serve
4.服务器端口号配置

module.exports = {
    // ...其他配置
    devServer: {
      port: 10110 // 端口号
    }
}

---

---

1. ES6规范：导出export 或者 export default {}；导入import 变量名 from '模块标识' ↩︎