[webpack 学习系列] 3. webpack 入门

首先确保安装了 node 和 npm

基本安装：

mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

下面我们创建如下的目录结构：

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

src/index.js

function component() {
  const element = document.createElement('div');

  // Lodash, currently included via a script, is required for this line to work
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

index.html

<!doctype html>
<html>
  <head>
    <title>Getting Started</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

修改下我们的 package.json 文件，设置 private 为 true，代表我们的 npm 项目是私有的，不会发布到 npm 库中；移除 main 入口，避免向外暴露入口。

npm main

package.json

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

在这个例子中，有个隐式的依赖，index.js 依赖 lodash。因为 index.js 没有明确声明依赖 lodash，而是假设全局变量 _ 存在。

这种管理项目的方式会有点问题：

脚本依赖额外库不明显
如果依赖丢失或者引入顺序不对，都会报错
如果依赖包含了却没有使用，那么就会下载不必要的代码

下面让我们使用 webpack 来管理这些吧。

创建一个 bundle

修改我们的文件目录如下：

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

为了捆绑 lodash 到 index.js，我们需要安装 lodash。

npm install --save lodash
// 安装的包要打包到生产包使用 npm install --save，如果打包到开发包使用 npm install --save-dev

现在，在我们的脚本中导入 lodash：
src/index.js

+ import _ from 'lodash';
+
  function component() {
    const element = document.createElement('div');

-   // Lodash, currently included via a script, is required for this line to work
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    return element;
  }

  document.body.appendChild(component());

修改 dist/index.html

 <!doctype html>
  <html>
   <head>
     <title>Getting Started</title>
-    <script src="https://unpkg.com/lodash@4.16.6"></script>
   </head>
   <body>
-    <script src="./src/index.js"></script>
+    <script src="main.js"></script>
   </body>
  </html>

执行命令npx webpack，默认将使用我们 src/index.js 脚本文件作为我们的入口，生成dist/main.js作为输出。

打开 index.html 文件，我们将看到 'hello webpack'。

使用配置文件

上面我们使用了 webpack 的默认配置，但是许多项目需要一个很复杂的安装，这时候我们就需要 webpack 配置文件来帮我们高效地来管理了。比起在命令行手动输入命令，配置文件高效很多。
project:

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

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js', // 入口
  output: { // 出口
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

执行命令使用配置文件打包：

npx webpack --config webpack.config.js

webpack.config.js 文件存在的话，webpack 命令将默认使用该文件（即输入 npx webpack 即可）。通过 --config 我们可以灵活地制定配置文件。

npm 脚本

下面我们来使用 npm 脚本，这也是为什么我们上面安装了 webpack-cli 这个库的原因。

package.json

 {
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
    "scripts": {
-      "test": "echo \"Error: no test specified\" && exit 1"
+      "test": "echo \"Error: no test specified\" && exit 1",
+      "build": "webpack"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "webpack": "^4.20.2",
      "webpack-cli": "^3.1.2"
    },
    "dependencies": {
      "lodash": "^4.17.5"
    }
  }

这样我们就可以使用 npm run build 来代替 npx 了。

参考：
https://webpack.js.org/guides/getting-started/

[webpack 学习系列] 3. webpack 入门