webpack基础篇|博客系列 | 前端进阶之旅

# 一、基本使用

# 1.1 初始化项目

首先我们创建一个目录, 并初始化npm:

$ mkdir webpack-basic && cd webpack-basic
$ npm init -y

@前端进阶之旅: 代码已经复制到剪贴板

(使用-y初始化npm会帮助我们生成一个默认的package.json配置)

# 1.2 本地安装webpack

前面已经提到过, 文章采用的webpack版本号是>4.0的, 由于webpack与webpack-cli已经分开了, 我们需要分别安装它们(如果你使用的webpack版本号小于4.0则只需要安装webpack就可以了)

在webpack-basic的根目录下执行指令:

$ npm install webpack webpack-cli --save-dev

@前端进阶之旅: 代码已经复制到剪贴板

此时会发现package.json里的devDependencies中多出了你刚刚安装的webpack和webpack-cli.

# 1.3 创建bundle文件

完成以上步骤之后, 让我们来编写一个简单的页面来看看效果.

首先在根目录下创建一个src文件夹, 并在其中创建一个index.js文件
在根目录下创建一个dist文件夹, 并在其中创建一个index.html文件

之后, 项目结构就变成了这样:

 webpack-basic
 	|- package.json
 	|- /dist
 		|- index.html
 	|- /src
 		|- index.js

@前端进阶之旅: 代码已经复制到剪贴板

让我们在其中加上一些内容:

// src/index.js
function component() {
    var element = document.createElement('div');

    element.innerHTML = "Hello Webpack";

    return element;
}

document.body.appendChild(component());

@前端进阶之旅: 代码已经复制到剪贴板

<!--dist/index.html-->
<!DOCTYPE html>
<html lang="en&qu