深入实践Webpack模块化构建工具(3)

最新推荐文章于 2024-01-03 07:56:08 发布

蜗牛杨哥

最新推荐文章于 2024-01-03 07:56:08 发布

阅读量257

点赞数

本文链接：https://blog.csdn.net/u014635374/article/details/118389572

版权

安装 Webpack

在用 Webpack 执行构建任务时需要通过 webpack 可执行文件去启动构建任务，所以需要安装 webpack 可执行文件。在安装 Webpack 前请确保你的系统安装了5.0.0及以上版本的 Node.js。

在开始给项目加入构建前，你需要先新建一个 Web 项目，方式包括：

新建一个目录，再进入项目根目录执行 npm init 来初始化最简单的采用了模块化开发的项目；
用脚手架工具 Yeoman 直接快速地生成一个最符合你的需求的项目

安装 Webpack 到本项目

要安装 Webpack 到本项目，可按照你的需要选择以下任意命令运行：

# npm i -D 是 npm install --save-dev 的简写，是指安装模块并保存到 package.json 的 devDependencies
# 安装最新稳定版
npm i -D webpack

# 安装指定版本
npm i -D webpack@<version>

# 安装最新体验版本
npm i -D webpack@beta

npm install webpack@4.27.x -D  安装到本项目
npm install webpack@4.27.x -g  全局安装，所有的项目都可以使用

# 说明 4.27.x表示webpack版本号，表示安装4.27.x范围内的最新版本
webpack -v  查看webpack安装的版本


# 卸载已经安装的webpack
 npm uninstall webpack -D 

# 将编译后的example.js结果保存在app.js文件中；
webpack example.js -o app.js  


小提示：
    旧版本的webpack还需要安装webpack-cli脚手架工具,而最新的版本的webpack打包工具已经集成了脚手架工具

安装完后你可以通过这些途径运行安装到本项目的 Webpack：

在项目根目录下对应的命令行里通过 node_modules/.bin/webpack 运行 Webpack 可执行文件。
在 Npm Script 里定义的任务会优先使用本项目下的 Webpack，代码如下：
```
"scripts": {
    "start": "webpack --config webpack.config.js"
}
```

安装 Webpack 到全局

安装到全局后你可以在任何地方共用一个 Webpack 可执行文件，而不用各个项目重复安装，安装方式如下：

npm i -g webpack

虽然介绍了以上两种安装方式，但是我们推荐安装到本项目，原因是可防止不同项目依赖不同版本的 Webpack 而导致冲突。

使用 Webpack

下面通过 Webpack 构建一个采用 CommonJS 模块化编写的项目，该项目有个网页会通过 JavaScript 在网页中显示 Hello,Webpack。

运行构建前，先把要完成该功能的最基础的 JavaScript 文件和 HTML 建立好，需要如下文件：

页面入口文件 index.html

<html>
<head>
  <meta charset="UTF-8">
</head>
<body>
<div id="app"></div>
<!--导入 Webpack 输出的 JavaScript 文件-->
<script src="./dist/bundle.js"></script>
</body>
</html>

JS 工具函数文件 show.js

// 操作 DOM 元素，把 content 显示到网页上
function show(content) {
  window.document.getElementById('app').innerText = 'Hello,' + content;
}

// 通过 CommonJS 规范导出 show 函数
module.exports = show;

JS 执行入口文件 main.js

// 通过 CommonJS 规范导入 show 函数
const show = require('./show.js');
// 执行 show 函数
show('Webpack');

Webpack 在执行构建时默认会从项目根目录下的 webpack.config.js 文件读取配置，所以你还需要新建它，其内容如下：

const path = require('path');

module.exports = {
  // JavaScript 执行入口文件
  entry: './main.js',
  output: {
    // 把所有依赖的模块合并输出到一个 bundle.js 文件
    filename: 'bundle.js',
    // 输出文件都放到 dist 目录下
    path: path.resolve(__dirname, './dist'),
  }
};

由于 Webpack 构建运行在 Node.js 环境下，所以该文件最后需要通过 CommonJS 规范导出一个描述如何构建的 Object 对象。

此时项目目录如下：

|-- index.html
|-- main.js
|-- show.js
|-- webpack.config.js

一切文件就绪，在项目根目录下执行 webpack 命令运行 Webpack 构建，你会发现目录下多出一个 dist目录，里面有个 bundle.js 文件， bundle.js 文件是一个可执行的 JavaScript 文件，它包含页面所依赖的两个模块 main.js 和 show.js 及内置的 webpackBootstrap 启动函数。这时你用浏览器打开 index.html 网页将会看到 Hello,Webpack。

Webpack 是一个打包模块化 JavaScript 的工具，它会从 main.js 出发，识别出源码中的模块化导入语句，递归的寻找出入口文件的所有依赖，把入口和其所有依赖打包到一个单独的文件中。从 Webpack2 开始，已经内置了对 ES6、CommonJS、AMD 模块化语句的支持。

至此你已经学会了 Webpack，接下来我们将探索 Webpack 的更多功能。