webpack 傻瓜式安装教程

在一个全英文目录下新建一个全英文的文件夹

以命名为webpack为例，进入该文件夹里面

shift+鼠标右键，点击在此处打开命令行

安装webpack：

npm install --save-dev webpack

如果你使用的webpack 4+ 版本，还需安装cli：

npm install --save-dev webpack-cli

等待安装完成，输入以下命令：

webpack -v

代表webpack安装完成

接下来用一个demo来体验webpack

依然在webpack文件目录下shift+鼠标右键打开命令行

新建一个文件夹app：

mkdir app && cd app

npm init -y

npm install webpack webpack-cli --save-dev

此时app的目录结构：

新建一个index.html文件和一个src目录，里面新建一个index.js文件

src/index.js

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

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

  return element;
}

document.body.appendChild(component());

index.html

<!doctype html>
<html>
  <head>
    <title>app</title>
    <script src="https://unpkg.com/[email protected]"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

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

添加： "private": true,
删去： "main": "index.js",

package.json

{
  "name": "app",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.16.5",
    "webpack-cli": "^3.1.0"
  }
}

创建一个 bundle 文件

首先，我们稍微调整下目录结构，将“源”代码(/src)从我们的“分发”代码(/dist)中分离出来。“源”代码是用于书写和编辑的代码。“分发”代码是构建过程产生的代码最小化和优化后的“输出”目录，最终将在浏览器中加载：

webpack根目录下创建一个dist文件夹，把index.html移动到dist文件夹下

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

npm install --save lodash

现在，在我们的脚本中 import lodash，须更改部分src/index.js文件

src/index.js

import _ from 'lodash';

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

  // Lodash 引入以下 script 脚本
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

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

dist/index.html

<!doctype html>
<html>
  <head>
    <title>dist/index</title>
  </head>
  <body>
    <script src="main.js"></script>
  </body>
</html>

执行 npx webpack，会将我们的脚本作为入口起点，然后输出为 main.js。Node 8.2+ 版本提供的 npx 命令，可以运行在初始安装的 webpack 包(package)的 webpack 二进制文件（./node_modules/.bin/webpack）：

npx webpack

在浏览器中打开 index.html，如果一切访问都正常，你应该能看到以下文本：'Hello webpack'。

yazhiShaw

发布了16 篇原创文章 · 获赞 39 · 访问量 3万+

私信关注

webpack 傻瓜式安装教程

猜你喜欢