- 安装Webpack
在用 Webpack 执行构建任务时需要通过
webpack
可执行文件去启动构建任务,所以需要安装webpack
可执行文件。 在安装 Webpack 前请确保你的系统安装了5.0.0及以上版本的 Node.js。在开始给项目加入构建前,你需要先新建一个 Web 项目,方式包括:
- 新建一个目录,再进入项目根目录执行
npm init
来初始化最简单的采用了模块化开发的项目;- 用脚手架工具 Yeoman 直接快速地生成一个最符合你的需求的项目。
2.安装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
3.安装 Webpack到全局
安装到全局后你可以在任何地方共用一个 Webpack 可执行文件,而不用各个项目重复安装,安装方式如下:
npm i -g webpack
mac下加上sudo
4.使用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》