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

2018-12-13 本文已影响3人仰简

一、前言

什么是 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 命令，最后输出如下的结果。