webpack学习笔记——简介及安装

108 阅读2分钟
原文链接: www.jianshu.com

一、前言

什么是 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