一、前言
什么是 webpack 呢？如下，一图胜千言，就是将左边的各种资源进行整合，压缩甚至是混淆等种种操作后，最后打包成右边的图示几个通用的纯粹的 js css jpg png 等。懒得理解了，就把它看成是 Android 中的 gradle 吧。
image.png
二、安装
1. 安装 node.js
安装 webpack 前，首先我们需要安装 node.js，怎么安装呢？打开 node.js 的官网，如下选择 LTS 版本，下载并安装。
image.png
安装完成后，你就可以愉快的执行如下命令查看版本了。
node --version
输出结果
v10.14.2
但作为前端开发，一般我们常用的命令是 npm，如
npm --version
输出结果
6.4.1
安装过程中如果细心留意的话，会看到如下的提示。
This package will install:
• Node.js v10.14.2 to /usr/local/bin/node
• npm v6.4.1 to /usr/local/bin/npm
npm（Node Package Manager）是Node.js下的主流套件管理程式。它在Node.js v0.6.x版本之后，内建于Node系统。通过npm可以协助开发者安装、卸载、删除、更新Node.js套件，并且可以通过npm发布自己的插件。这个就有点儿类似于我们常用的 apt-get 或者 Homebrew 了。
2.安装 webpack
一般的安装步骤
npm install --save-dev webpack // 安装最新版本
npm install --save-dev webpack@<version> // 安装特定版本
上面就完成了 webpack 的安装，在 v4 版本及以上版本上，如果想执行命令行，还得安装命令行 webpack-cli。
npm install --save-dev webpack-cli
安装完成后，就可以愉快的悄下 webpack 命令了。如果发现 webpack 命令找不到的情况就重启下你的命令行试试。
当然，上面的 webpack 的安装只对当前项目有用。如果想全局安装，请用如下命令。
npm install --global webpack
三、写个小 demo，小试牛刀
按照官网的介绍，写个小 demo 试一试。
src/bar.js
export default function bar() {
console.log("function bar");
}
src/index.js
import bar from './bar';
bar();
/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="dist/bundle.js"></script>
</body>
</html>
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'bundle.js'
}
};
注意 bar.js 和 index.js 是在 src 文件夹下的，而 index.html 和 webpack.config.js 是在根目录下。webpack.config.js 顾名思义就是 wepack 的配置文件，另外 3 个就是源文件了。然后在根目录下愉快的悄下我们的 webpack 命令，最后输出如下的结果。
image.png
网友评论