起步webpack

发表于 | 分类于 ，

什么是webpack？

webpack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

将npm的源替换成淘宝的源

1
npm config set registry http://registry.npm.taobao.org/

若是需要发布自己的包，需改回官方源：

1
npm config set registry https://registry.npmjs.org/

基本安装

首先我们创建一个目录，初始化 npm，然后在本地安装 webpack，接着安装 webpack-cli（此工具用于在命令行中运行 webpack）：

1
2
3
mkdir webpack-demo && cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

在webpack-demo下创建文件：

index.html

1
2
3
4
5
6
7
8
9
10
<!doctype html>
<html>
  <head>
    <title>起步</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

src/index.js

1
2
3
4
5
6
7
8
9
10
function component() {
  var element = document.createElement('div');

  // Lodash（目前通过一个 script 脚本引入）对于执行这一行是必需的
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

现在的目录结构：

1
2
3
4
5
  webpack-demo
  |- package.json
+ |- index.html
+ |- /src
+   |- index.js

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

package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
  {
    "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.0.1",
      "webpack-cli": "^2.0.9"
    },
    "dependencies": {}
  }

创建一个bundle文件

调整目录结构，“dist”代码是构建过程产生的代码最小化和优化后的“输出”目录，最终将在浏览器中加载：

project

1
2
3
4
5
6
7
  webpack-demo
  |- package.json
+ |- /dist
+   |- index.html
- |- index.html
  |- /src
    |- index.js

要在 index.js 中打包 lodash 依赖，我们需要在本地安装 library：

1
npm install --save lodash

现在，在我们的脚本中 import lodash：

src/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
+ import _ from 'lodash';
+
  function component() {
    var element = document.createElement('div');

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

    return element;
  }

  document.body.appendChild(component());

现在，由于通过打包来合成脚本，我们必须更新 index.html 文件。因为现在是通过 import 引入 lodash，所以将 lodash <script> 删除，然后修改另一个 <script> 标签来加载 bundle，而不是原始的 /src 文件：

dist/index.html

1
2
3
4
5
6
7
8
9
10
11
  <!doctype html>
  <html>
   <head>
     <title>起步</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 作为输出。

引入jQuery

在webpack-demo目录输入，下载jQuery到node_modules：

1
npm install --save jquery

在src/index.js里引入jQuery：

1
2
3
4
5
6
7
8
9
10
11
12
import _ from 'lodash';
import $ from 'jquery';

function component() {
  var element = $('<div></div>');

  element.html(_.join(['Hello','webpack'], ' '));
    
  return element.get(0);
}

document.body.appendChild(component());

然后再次运行：

npx webpack

使用配置文件和脚本

在webpack-demo目录新建并编辑webpack.config.js：

webpack.config.js

1
2
3
4
5
6
7
8
9
const path = require('path');

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

修改 package.json：

package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  {
    "name": "webpack-demo",
    "version": "1.0.0",
    "description": "",
    "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",
      "lodash": "^4.17.5"
    }
  }

现在，可以使用 npm run build 命令，来替代我们之前使用的 npx 命令。