您的位置：首页 > Web前端 > Node.js

Webpack笔记（一）：安装配置

2018-03-08 17:48 597 查看

一、局部安装介绍：

全局安装会导致不同项目中的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

命令。传递参数的方式与后者一样。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： webpack node

相关文章推荐

新的分享

章节导航