前段时间找工作，面试的时候很多webpack 的配置的东西基本上快忘完了，所以写这一篇文章是为自己可以从头开始系统的复习webpack，也希望可以帮助到想要系统的学习webpack 却无从下手的同学，本文有任何错误还请不吝赐教，接下来我们开始吧。在开始跟着本文编写代码的时候需要配置node 环境，最好是再全局安装一个淘宝镜像，这里就不赘述node 和淘宝镜像的安装方式了。本文接下来所有的代码都会放在github 上，每一个阶段的文章都会对应一个不同的分支，比如此文是 xxx-01，那么对应的代码分支就是dev-1.0。

本文代码github 地址：戳我

开始

首先我们先创建一个新的文件夹就叫 webpack-learning 吧，然后在终端进入到这个文件夹的目录执行以下命令：

npm init -y
cnpm i webpack webpack-cli -D

执行完这两条命令后我们会发现文件根目录多了package.json 和 node_modules 文件夹，到这里就可以开始写代码了。

接下来我们需要在根目录添加文件夹及文件，如下：

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

在index.html 添加如下代码

<!doctype html>
<html>
<head>
   <title>起步</title>
</head>
<body>
  <script src="./src/index.js"></script>
  <script src="bundle.js"></script>
</body>
</html>

webpack.config.js 添加如下代码

const path = require('path');

module.exports = {
  // 入口文件路径
  entry: './src/index.js',
  // 输出目录
  output: {
    // 打包文件名
    filename: 'bundle.js',
    // 输出文件路径
    path: path.resolve(__dirname, 'dist')
  }
};

我们还需要调整 package.json 文件，以便确保我们安装包是私有的(private)，并且移除 main 入口。这可以防止意外发布你的代码。并且添加npm 脚本

{
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
+   "private": true,
-   "main": "index.js",
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      + "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "webpack": "^4.0.1",
      "webpack-cli": "^2.0.9"
    },
    "dependencies": {}
  }

以上就是一个基本的配置了，此时执行 npm run build 命令，然后打开dist 目录会发现多了一个bundle.js 文件，然后在浏览器中打开index.html 会发现页面上显示了 "hello webpack", 这就说明我们写在src/index.js 的代码已经成功的被打包到了dist/bundle.js 文件了。到这里就算是一个开始了吧。

webpack 从零开始 -01

开始