一、局部安装介绍：
全局安装会导致不同项目中的webpack锁定到指定版本，也会导致使用不同webpack版本的项目构建失败，丧失了灵活性，因此推荐局部安装。
a. 首先确保安装了Node.js的最新版本。
b. 写这篇文章的时候，webpack已经到了4.1.0版本；
c. 要安装最新版本或特定版本，请运行以下命令之一：
npm install --save-dev webpack
npm install --save-dev webpack@<version>
二、构建项目：
a. 创建项目，初始化npm以及本地安装webpack
mkdir webpack-test && cd webpack-test
npm init -y
npm install --save-dev webpack
b. 创建以下项目结构
webpack-test
|-package.json
|-dist // 构建后（产生的代码最小化以及优化）输出的分发代码
|-index.html
|-src // 用于书写和编辑的源代码
|-index.js
c. 让我们先按照之前的方法来进行编写：
/src/index.js
function createComponent() {
var ele = document.createElement('div');
ele.innerHTML = 'hello world';
// 此处依赖于jquery
$('#root').append(ele);
}
createComponent();
/dist/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>webpack test</title>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<div id="root"></div>
<script src="../src/index.js"></script>
</body>
</html>
打开/dist/index.html，会发现页面上出现了 "hello world" 字样。
但，此示例中script标签之间存在隐式（假设已经存在jquery全局变量）依赖，index.js的执行必须依赖jquery文件。这种JavaScript的管理方式存在一些问题：
① 如果依赖过多会导致管理混乱，缺乏灵活性；
② 如果依赖不存在或者引用顺序错误，会导致程序无法执行；
③ 如果依赖被引入但没有使用，浏览器将被迫下载无用代码；
d. 使用webpack构建项目：
保持项目结构不变，将文件做以下修改：
/src/index.js
// 通过显示声明依赖，webpack通过这些信息来构建依赖图
// 然后使用图去生成一个优化过的，按照正确顺序执行的bundle
+ import $ from 'jquery';
function createComponent() {
var ele = document.createElement('div');
- ele.innerHTML = 'hello world';
+ ele.innerHTML = 'hello webpack';
// 此处依赖于jquery
$('#root').append(ele);
}
createComponent();
/dist/index.html
由于通过import来引入jquery，所以在index.html中需要将外部引入jquery的<script>删除。而此时应用webpack的打包功能将js打包进一个输出文件bundle.js，因此需要做如下修改：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>webpack test</title>
- <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
<div id="root"></div>
- <script src="../src/index.js"></script>
+ <script src="bundle.js"></script>
</body>
</html>
然后执行CLI命令：
.\node_modules\.bin\webpack [entry] [output]
在项目的根目录下打开命令行工具，然后键入：
.\node_modules\.bin\webpack src/index.js dist/bundle.js
如果看到类似如下信息，即为构建成功
Asset Size Chunks Chunk Names
bundle.js 275 kB 0 [emitted] [big] main
[0] ./src/index.js 201 bytes {0} [built]
+ 1 hidden module
此时再打开/dist/index.html目录即可看到 "hello webpack" 字样
e. 使用一个配置文件：
大多数项目会有一个很复杂的配置，在命令行里输入大量配置并不是一个很好的选择，因此需要一个配置文件。
在项目的根目录下增加一个webpack.config.js：
webpack-test
|-package.json
+ |-webpack.config.js
|-dist // 构建后（产生的代码最小化以及优化）输出的分发代码
|-index.html
|-src // 用于书写和编辑的源代码
|-index.js
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js', // 入口文件
output: {
filename: 'bundle.js', // 输出文件名
path: path.resolve(__dirname, 'dist') // 输出到dist目录下
}
}
然后在命令行内执行如下命令：
.\node_modules\.bin\webpack
如果看到跟之前类似的构建信息即为构建成功。
注意：webpack在这里默认使用了webpack.config.js，如果你不想使用它，可以在命令行内向它传递名称参数：
.\node_modules\.bin\webpack --config [configName]
f. 使用NPM脚本：
使用npm脚本（npm script）可以一次执行一个或多个webpack命令。
在项目根目录下的package.json中添加：
{
...
"script": {
"build": "webpack"
},
...
}
现在，在命令行中键入npm run build即可代替之前的.\node_modules\.bin\webpack命令。传递参数的方式与后者一样。
网友评论