webpack学习—概念、安装、配置文件

@一棵菜菜  June 26, 2019
webpack 

说明

最近开始学习webpack，今天阅读了英文版的官方文档的《Getting Started》，且自己操作了一遍，并摘抄整理成笔记，记录成此文。
后续将继续更新webpack系列的学习笔记。

webpack 官方文档
推荐阅读webpack官方文档《Getting Started》

1. webpack产生原因

面向过程编程

所有js代码都放在一个js文件中，代码冗余，非常难于维护。

index.html

 <body>
    <div id="root"></div>
  </body>
  <script src="old_index.js"></script>

old_index.js

 var rootDom = document.getElementById("root");
  var Header = document.createElement("div");
  Header.innerHTML = "Header";
  rootDom.appendChild(Header);

  var Sider = document.createElement("div");
  Sider.innerHTML = "Sider";
  rootDom.appendChild(Sider);

面向对象编程

按类型或功能拆分js，放到不同的js文件中，使代码更具维护性。

缺点：
会引入非常多的js文件，导致http请求数量增加，加载速度缓慢;
js是否依赖于外部库或js并不明显;
如果缺少依赖项，或者以错误的顺序包含依赖项，应用程序将无法正常运行；
结论：代码同样不易维护。

index.html

  <body>
    <div id="root"></div>
  </body>
  <script>
    var rootDom = document.getElementById("root");
  </script>
  <script src="component/header.js"></script>
  <script src="component/sider.js"></script>
 
  <script>
    new Header();
    new Sider();
  </script>

header.js

function Header() {
  var Header = document.createElement("div");
  Header.innerHTML = "Header";
  rootDom.appendChild(Header);
}

sider.js

function Sider() {
  var Sider = document.createElement("div");
  Sider.innerHTML = "Sider";
  rootDom.appendChild(Sider);
}

模块方式开发

index.html

  <body>
    <div id="root"></div>
  </body>
  <script src="index.js"></script>

index.js

// ES Module 模块引入方式
import Header from "./component/header";
import Sider from "./component/sider";
import Footer from "./component/footer";

new Header();
new Sider();
new Footer();

header.js

function Header() {
  var rootDom = document.getElementById("root");
  var Header = document.createElement("div");
  Header.innerHTML = "Header";
  rootDom.appendChild(Header);
}

// 导出模块Header
export default Header;

Modules 模块（拓展）

除了import和export，webpack还支持各种其他模块语法。

  • ES Module 模块引入方式
  • CommonJs 模块引入方式
  • CMD
  • AMD
推荐webpack官方文档《Modules》
推荐webpack官方文档《Module Methods》

例子

ES2015 模块引入方式。import引入的就是一个模块！

// 导入
import Header from './header.js';
// 使用
new Header();

// 导出
function Header(){};
export default Header;

CommonJs 模块引入方式

// 引入
var Header = require('./header.js');
new Header();

// 导出
function Header(){};
module.exports = Header;

模块导入导出。import、export是ES2015的标准，但大多数浏览器不支持（或不能识别）它们（所以下面的index.js执行时会报错），webpack可以转义import等为浏览器能够识别的语法。

webpack登场

注意1：webpack不是一个js翻译器！它只认识import这样的语句，其他js高级语法它都不认识的。
注意2：除了import和export语句，webpack不会更改任何代码！如果您正在使用其他ES2015功能，请确保使用换行器，如Babel或Buble通过webpack的加载器系统。

2. webpack是什么？一个模块打包工具

webpack究竟是什么？—— webpack是一个基于Node的模块打包工具。

发展史

早期：webpack是一个 js 模块打包工具（只能导入（打包）js文件）——>
现在：webpack可以打包各种文件（如css文件等）

3. webpack安装

1. 安装node

因为webpck是一个基于node的打包工具，所以必须先安装node。npm是在node.js中编写的。安装node.js时, npm将自动安装。

node官方下载地址
注意：请务必安装标记为LTS的版本。其他版本还没有经过npm的测试。

检测是否安装成功：

node -v
npm -v

2. 使用npm初始项目规范

将在根目录上生成package.json文件。

npm init 
// 或快捷生成默认配置项
npm init -y
我的文章《npm 学习》

3. 安装webpack、webpack-cli

方式1：全局安装

npm install webpack webpack-cli -g

// 检查是否全局安装成功（查看webpack的全局版本）
webpack -v

但是，不推荐全局安装webpack！

因为全局安装webpack后，则webpack全局的版本号是固定的，如果多个项目里webpack里不同，则无法运行。
比如一个项目是webpack 3，一个是webpack 4，全局是webpack 4.2.0，那么3的项目就跑不起来。解决办法是删除webpack 4，重新安装webpack 3才能跑起来。但如果两个项目间有依赖，两个项目都要启动起来，那么就没办法了。
// 全局卸载
npm uninstall webpack webpack-cli -g

方式2：在项目中安装（即本地安装）【推荐】

进入项目的根目录，执行命令：

npm install webpack --save-dev
npm install webpack-cli --save-dev
webpack-cli的作用：使我们可以在命令行使用webpack、npx webpack这些命令。
官方文档描述：webpack-cli (the tool used to run webpack on the command line):

查看下载的版本:

npx webpack -v  // 打印出 4.35.0
// webpack -v  // 查询失败，因为这个命令是查找全局的webpack的版本，项目中安装的无法查询到。
npx命令： which ships with Node 8.2/npm 5.2.0 or higher, runs the webpack binary (./node_modules/.bin/webpack) of the webpack package we installed in the beginning:
（即：npx命令运行我们开始安装的webpack包里的webpack二进制文件(./node_modules/.bin/webpack):）

安装特定版本的webpack（如4.16.5版）

npm install webpack@4.16.5 webpack-cli --save-dev

4. webpack的配置文件

引入js文件模块，和图片文件，打包流程和方式是不一样的!

是通过配置文件告诉webpack如何打包。

注意：
从版本4开始，webpack不需要任何配置，但是大多数项目需要更复杂的设置。

1. 使用的默认打包配置文件

在index.js所在目录下，执行以下命令，将进行webpack打包工作。
打包完成后将在index.js所在目录下生成一个dist文件夹，里面包含一个main.js（打好包的文件）。

// 使用webpack打包index.js文件
npx webpack index.js
虽然此时项目中并没有webpack配置文件，但是执行此命令仍然能够正常打包，是因为此命令使用了webpack默认打包配置文件。

2. 手动编写打包配置文件【必须会】

1.新建webpack.config.js文件

概念：

entry：打包的入口文件
output：打包输出配置
output.filename：打包出的文件名
output.path：打包出的文件放在哪里（必须是绝对路径）—— 不是必须的
__dirname: 指webpack.config.js文件所在的文件目录
mode:打包模式；可取值有，production:代码被压缩；development：代码不压缩

基本配置模板：

// node的核心模块
const path = require("path");

module.exports = {
  mode: "production",
  entry: "./src/index.js", // 入口文件
  // 打包输出配置
  output: {
    filename: "bundle.js", // 打包出的文件名
    path: path.resolve(__dirname, "dist") // （打包输出的文件路径，文件夹名）。__dirname：当前文件所在路径
  }
};
【牢记】
以上含义为：入口文件是"./src/index.js"，（即从"./src/index.js"文件开始）进行打包，将打包生成的文件bundle.js 放在当前目录下的"dist"文件夹里。

优化后的项目目录结构：【理解】

|- dist (可以直接发布（在浏览器中运行）的代码)
   |- bundle.js （打包后生成的包文件）
   |- index.html （首页）
|- src  ("源代码")
   |- component
       |- header.js
       |- sider.js
   |- index.js (webpack打包入口文件)

|- node_modules （模块依赖）
|- package.json
|- webpack.config.js
【注意】
1.打包生成的文件通常放在dist文件夹下，最终将在浏览器中加载;
2.源代码通常放在src文件夹下
index.js文件不能直接在浏览器中运行，最终由webpack打包生成的代码才可以在浏览器中运行。所以index.js是我们的源代码（header.js等都是），通常我们把源代码放在src文件夹下。

官方文档描述——"Creating a Bundle"：
separating the "source" code (/src) from our "distribution" code (/dist).
The "source" code is the code that we'll write and edit.
The "distribution" code is the minimized and optimized output of our build process that will eventually be loaded in the browser（“发布”代码是我们构建过程中最小化和最优化的输出，最终将在浏览器中加载）

distribution：['dɪstrə'bjʊʃən] n. 分发，分配，发行，上映

修改index.html：

<body>
   <div id="root"></div>
</body>
<!-- webpack将模块全部打包到一个js文件里 -->
<script src="./bundle.js"></script>

2.再执行打包命令(不需要跟打包入口文件名啦)：

npx webpack

打包完成后，现在在浏览器中打开 dist/index.html 就可以正常展示页面啦～

3.其他：如何修改配置文件名？

webpack配置文件名不一定非要是webpack.config.js，可以修改为其他的，然后执行下面的命令进行打包：

npx webpack --config webpackconfig.js
含义：webpack以webpackconfig.js文件为配置文件进行打包

小结流程【牢记】

当运行npx webpack命令时，webpack并不知道自己该怎么去打包，它将会去寻找配置文件webpack.config.js，然后按配置进行打包。

5. NPM Scripts 简化打包命令【推荐】

在package.json文件中的scripts里添加：

 "scripts": {
    "bundle": "webpack" 
  },
含义：直接运行npm bundle或npm run bundle命令，bundle命令底层将执行webpack打包功能。
会先到工程目录（node_moudles）下寻找是否安装了webpack，如果有就使用；如果没有才会到全局下面去寻找webpack。

6. webpack 打包输出的内容

Hash: 4b94b8e5eaf0789bf981
Version: webpack 4.35.0   // 当前webpack版本
Time: 185ms  // 打包耗时
Built at: 2019-06-27 16:12:22
   Asset      Size       Chunks             Chunk Names
bundle.js  1.31 KiB       0  [emitted]        main
Entrypoint main = bundle.js
[0] ./src/index.js + 3 modules 766 bytes {0} [built]
    | ./src/index.js 163 bytes [built]
    | ./src/component/header.js 203 bytes [built]
    | ./src/component/sider.js 197 bytes [built]
    | ./src/component/footer.js 203 bytes [built]

小结-自问

  1. webpack是什么？
  2. 模块是什么？
  3. webpack的配置文件作用是什么？有哪些基本的配置项？
推荐阅读webpack官方文档《Getting Started》

添加新评论