webpack 4 入门指南系列二（入门篇）

作者: yfmei | 来源:发表于2018-07-08 14:08 被阅读0次

webpack是用来编译javascript模块的。

基本设置

首先创建一个目录，初始化npm，本地安装webpack，以及安装webpack-cli（webpack命令行工具）：

# win10 ps执行连续命令用 ; 替换 &&
mkdir webpack-demo && webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

project

   webpack-demo
  |- package.json
+ |- 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>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文件以确保我们的包是私有的，同时移除了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.0.1",
      "webpack-cli": "^2.0.9"
    },
    "dependencies": {}
  }

在此示例中，<script>标记之间存在隐式依赖关系。我们的index.js文件在运行之前依赖于包含在页面中lodash。这是因为index.js从未明确声明需要lodash;它只是假设全局变量_存在。
以这种方式管理JavaScript项目存在问题：
- 无法明显的看出该脚本依赖于外部库。
- 如果缺少依赖项或包含在错误的顺序中，则应用程序将无法正常运行。
- 如果包含但未使用依赖项，则将强制浏览器下载不必要的代码。
让我们使用webpack来管理这些脚本。

打包依赖（bundle）

我们将要稍微调整下我们的目录结构，把源代码（/src）和分发代码（/dist）分开来。源代码是我们编写和编辑的代码。分发代码是我们在构建过程中优化和压缩的结果，将在浏览器中加载：

project

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

要将lodash依赖项与index.js捆绑在一起，我们需要在本地安装库：

npm install --save lodash

安装软件包到生产环境时，应该使用npm install --save。如果安装软件包是为了开发环境（比如 linter，测试包等等），那你就需要使用npm install --save-dev。

src/index.js

现在在脚本中引入 lodash

+ 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。因为已经在index.js中import了，让我们移除lodash的script标签，并且用其他script标签加载构建生成的捆绑包而不是/src下的源代码文件:

  <!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>

在这个设置中，index.js明确要求lodash存在，并将其绑定为_（没有全局范围污染）。通过声明模块需要什么依赖项，webpack可以使用此信息来构建依赖关系图。然后，它使用该图生成一个优化的包，其中js脚本将以正确的顺序执行。话虽如此，让我们运行npx webpack，它将把src/中的 index.js脚本作为入口点，并生成dist/main.js作为输出。 npx命令需要Node 8.2 / npm 5.2.0或更高版本一起运行，它将执行我们在开头安装的webpack包的webpack二进制文件（./node_modules/.bin/webpack）：

npx webpack

Hash: f786199817e635507cff
Version: webpack 4.15.1
Time: 3785ms
Built at: 2018-07-08 13:07:30
  Asset      Size  Chunks             Chunk Names
main.js  70.5 KiB       0  [emitted]  main
[1] (webpack)/buildin/module.js 497 bytes {0} [built]
[2] (webpack)/buildin/global.js 489 bytes {0} [built]
[3] ./src/index.js 222 bytes {0} [built]
    + 1 hidden module

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

你的输出可能会有所不同，但如果构建成功，那么你可以继续往下走了。另外，不要担心警告，我们稍后会解决。

在浏览器中打开 index.html，如果配置都是正确的，你应该会看到“Hello webpack”。

模块

import和export语句已经在ES2J015中标准化，并且在大多数浏览器中都收支持。一些旧的浏览器仍然很落后不支持，但webpack支持开箱即用的模块。

在幕后， webpack实际上“转换”了代码，以便旧浏览器也可以运行它。如果你查看dist/main.js，你就会发现了。除了import和export之外，webpack还支持各种其他模块语法。
注意，webpack不会更改import和export语句以外的代码。如果你正在使用其他ES2015功能，请确保通过webpack的加载器系统使用Babel等转换器。

使用配置文件

从版本4开始，webpack不需要任何配置，但大多数项目可能需要更复杂的设置，所以webpack支持配置文件的形式。与在命令行手动设置大量命令相比，配置文件方便的多。现在我们来创建一个配置文件来替换我们上面使用的命令行接口选项。

projcet

  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
Hash: 17e2e6a019ab95135618
Version: webpack 4.15.1
Time: 3792ms
Built at: 2018-07-08 13:34:51
  Asset      Size  Chunks             Chunk Names
main.js  70.5 KiB       0  [emitted]  app
[1] (webpack)/buildin/module.js 497 bytes {0} [built]
[2] (webpack)/buildin/global.js 489 bytes {0} [built]
[3] ./src/index.js 224 bytes {0} [built]
    + 1 hidden module

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this v
alue. Set 'mode' option to 'development' or 'production' to enable defaults for each
 environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://w
ebpack.js.org/concepts/mode/

注意，windows上通过其路径调用webpack时必须使用反斜杠，例如node_modules.bin\webpack --config webpack.config.js。

只要存在webpack.config.js，webpack命令就会默认使用它。我们这里使用config选项只是为了告诉你，你可以传递任意名字的配置文件。在配置项很复杂需要拆分到多个文件的时候，这是很有用的。

配置文件比简单的命令行接口要灵活的多。通过这种方式可以指定加载器的规则（loader rules），插件（plugins），解析选项（resolve ）和许多其他增强功能。

npm 脚本

鉴于从命令行接口运行webpack的本地副本并不是特别有趣，我们可以设置一些快捷方式。我们将通过添加一个npm script来调整package.json

  {
    "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命令了。请注意，在scripts中，我们可以按照和npx一样的方式引用本地安装的npm软件包。此约定是大多数基于npm的项目的标准的，因为它允许所有贡献者使用相同的一组公共脚本（如果需要，每个脚本都带有--config标志）。
现在执行以下命令，你将会看到你的脚本别名是否运行正常:

npm run build

> webpack-demo@1.0.0 build C:\Users\PC\workspace\IntellijProjects\branches\bleview\c
li\webpack-demo
> webpack

Hash: 17e2e6a019ab95135618
Version: webpack 4.15.1
Time: 441ms
Built at: 2018-07-08 13:50:09
  Asset      Size  Chunks             Chunk Names
main.js  70.5 KiB       0  [emitted]  app
[1] (webpack)/buildin/module.js 497 bytes {0} [built]
[2] (webpack)/buildin/global.js 489 bytes {0} [built]
[3] ./src/index.js 224 bytes {0} [built]
    + 1 hidden module

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this v
alue. Set 'mode' option to 'development' or 'production' to enable defaults for each
 environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://w
ebpack.js.org/concepts/mode/

通过在npm run build和你的参数之间使用两个破折号可以传递自定义参数。例如 npm run build -- --colors。

总结

既然你已经有了个基本框架，那你就可以继续学习接下来的指南资源管理，以了解如何使用webpack管理图像和字体等资源。此时你的项目应该如下所示：

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

如果使用npm5，你还可能看到package-lock.json文件。

webpack 4 入门指南系列二（入门篇）

基本设置

project

src/index.js

index.html

package.json

打包依赖（bundle）

project

src/index.js

模块

使用配置文件

projcet

webpack.config.js

npm 脚本

总结

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

webpack 4 入门指南 系列二（入门篇）

基本设置

project

src/index.js

index.html

package.json

打包依赖（bundle）

project

src/index.js

模块

使用配置文件

projcet

webpack.config.js

npm 脚本

总结

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

webpack 4 入门指南系列二（入门篇）