Webpack实战（一）：Webpack打包工具安装及参数配置

时间 2020-01-04

标签 webpack 实战打包工具安装参数配置繁體版

原文原文链接

为何要模块化

javascript跟其余开发语言有不少的区别，其中一个就是没有模块化概念，若是一个项目中有多个js文件，咱们只能经过script标签引入的方式，把一个个js文件插入到页面，这种作法会也引发了不少弊端：javascript

须要手动维护JavaScript的加载顺序
屡次请求资源，影响了加载速度
在每一个script标签中，顶层做用域即全局做用域，若是没有任何处理而直接在代码中进行变量或函数声明，就会形成全局做用域的污染，也会形成命名冲突。

模块化很容易就避免这些问题，避免冲突，合并资源减小网络开销，经过导入和导出语句咱们能够清晰地看到模块间的依赖关系。html

模块打包工具

模块打包工具（module bundler）的任务就是解决模块间的依赖，使其打包后的结果能运行在浏览器上。它的工做方式主要分为两种：java

将存在依赖关系的模块按照特定规则合并为单个JS文件，一次所有加载进页面中。
在页面初始时加载一个入口模块，其余模块异步地进行加载。

目前社区中比较流行的模块打包工具备Webpack、Parcel、Rollup等。node

Webpack是什么

Webpack是一个开源的JavaScript模块打包工具，其最核心的功能是解决模块之间的依赖，把各个模块按照特定的规则和顺序组织在一块儿，最终合并为一个JS文件（有时会有多个，这里讨论的只是最基本的状况）。这个过程就叫做模块打包webpack

Webpack的特色

Webpack默认支持多种模块标准，包括AMD、CommonJS，以及最新的ES6模块，而其余工具大多只能支持一到两种。这对于一些同时使用多种模块标准的工程很是有用，Webpack会帮咱们处理好不一样类型模块之间的依赖关系。
Webpack有完备的代码分割（code splitting）解决方案。从字面意思去理解，它能够分割打包后的资源，首屏只加载必要的部分，不过重要的功能放到后面动态地加载。这对于资源体积较大的应用来讲尤其重要，能够有效地减少资源体积，提高首页渲染速度。
Webpack能够处理各类类型的资源。除了JavaScript之外，Webpack还能够处理样式、模板，甚至图片等，而开发者须要作的仅仅是导入它们。好比你能够从JavaScript文件导入一个CSS或者PNG，不过这些须要loader来处理。
Webpack 使用异步I/O和多级缓存提升运行效率，这使得 Webpack可以以使人难以置信的速度快速增量编译。
扩展性强，插件机制完善，Webpack 还有一个功能丰富的插件系统。大多数内容功能都是基于这个插件系统运行的，还能够开发和使用开源的 Webpack插件，来知足各式各样的需求。

安装Webpack

安装Webpack以前，须要安装最新版本的node.js,它须要依赖node.js,使用 Node.js 最新的长期支持版本(LTS - Long Term Support),使用旧版本的node.js，可能会遇到一些问题，由于它们可能缺乏 webpack 功能以及/或者缺乏相关 package 包。web

咱们使用node.js的包管理器npm安装Webpack，安装Webpack有两种方式：npm

1.全局安装：json

npm install --g webpack
复制代码

若是采用全局安装，那么在与他人进行项目协做的时候，因为每一个人系统中的Webpack版本不一样，可能会致使输出结果不一致。
部分依赖于Webpack的插件会调用项目中Webpack的内部模块，这种状况下仍然须要在项目本地安装Webpack，而若是全局和本地都有，则容易形成混淆

2.本地安装浏览器

npm install --save-dev webpack
复制代码

若是你使用 webpack 4+ 版本，你还须要安装 CLI。缓存

npm install --save-dev webpack-cli
复制代码

对于大多数项目，咱们建议本地安装。这可使咱们在引入破坏式变动(breaking change)的依赖时，更容易分别升级项目。注意：因为咱们将Webpack安装在了本地，所以没法直接在命令行内使用“webpack”指令。项目内部只能使用npx webpack的形式.

初始化一个项目

使用npm init 首先初始化一个项目，首先在命令行内定位到所要放项目的文件夹，而后执行npm init，建立便可。以下图

执行完以后，会生成一个pakeage.json文件,这个文件主要是用来记录这个项目的详细信息的，它会将咱们在项目开发中所要用到的包，以及项目的详细信息等记录在这个项目中。使用npm init初始化项目,在进行项目传递的时候不须要将项目依赖包一块儿发送给对方，对方在接收到你的项目以后直接执行npm install就能够将项目全部的依赖所有下载到项目里。

在项目内安装webpack,webpack-cli：

npm install --save-dev webpack webpack-cli
复制代码

Webpack.config.js 文件简单配置

从以前咱们在package.json中添加的脚本命令来看，当项目须要愈来愈多的配置时，就要往命令中添加更多的参数，那么到后期维护起来就会至关困难。为了解决这个问题，能够把这些参数改成对象的形式专门放在一个配置文件里，在Webpack每次打包的时候读取该配置文件便可，Webpack的默认配置文件为webpack.config.js

const path = require('path')
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  mode: 'development'
}
复制代码

Webpack对于output.path的要求是使用绝对路径（从系统根目录开始的完整路径），以前咱们在命令行中为了简洁因此使用了相对路径。而在webpack.config.js中，咱们经过调用Node.js的路径拼装函数——path.join，将__dirname（Node.js内置全局变量，值为当前文件所在的绝对路径）与dist（输出目录）链接起来，获得了最终的资源输出路径。

package.json 里面的scripts配置文件添加打包参数， "build": "webpack

{
  "name": "webpacktest2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    // "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "lanfeng",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10"
  }
}
复制代码

执行npm run build，Webpack就会预先读取webpack.config.js，而后进行打包。 index.js 文件

import firstDemo from './add-first.js';
document.write(firstDemo);
复制代码

add-first.js

const test = 'Hello Webpack'
export default test
复制代码

index.html 文件

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>First</title>
  </head>
  <body>
    <script src="./dist/bundle.js"></script>
  </body>
</html>
复制代码

预留效果如图：

以上就是Webpack相关的介绍和简单的配置方法。跟其余模块化打包工具相比，Webpack是开发者使用较多的一款打包工具。