webpack指南之项目的基本构建过程

责编:menVScode 2017-07-17 16:29 阅读(769)

建立如下的项目目录结构:

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

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

npm install --save lodash

然后在我们的脚本中 import。

src/index.js

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

<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="bundle.js"></script>
   </body>
</html>

        在这个设置中,index.js 显式要求引入的 lodash 必须存在,然后将它绑定为 _(没有全局作用域污染)。通过声明模块所需的依赖,webpack 能够利用这些信息去构建依赖图,然后使用图生成一个优化过的,会以正确顺序执行的 bundle。

        可以这样说,执行 webpack,会将我们的脚本作为入口起点,然后输出为 bundle.js,输出可能会稍有不同,但是只要构建成功,那么你就可以继续。

./node_modules/.bin/webpack src/index.js dist/bundle.js

Hash: ff6c1d39b26f89b3b7bb
Version: webpack 2.2.0
Time: 385ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  544 kB       0  [emitted]  [big]  main
   [0] ./~/lodash/lodash.js 540 kB {0} [built]
   [1] (webpack)/buildin/global.js 509 bytes {0} [built]
   [2] (webpack)/buildin/module.js 517 bytes {0} [built]
   [3] ./src/index.js 278 bytes {0} [built]

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

        ES2015 模块

        虽然在大多数浏览器中都不支持 import 和 export 语句,但是 webpack 却能够提供支持。事实上,webpack 在幕后会将代码“转译”,以便旧有浏览器可以执行。如果你检查 dist/bundle.js,你可以看到 webpack 具体如何实现,这是独创精巧的设计!

        注意,webpack 不会更改代码中除 import 和 export 语句以外的部分。如果你在使用其它 ES2015 特性,请确保你使用了一个像是 Babel 或 Bublé 的转译器。关于 webpack 支持的多种模块语法,查看模块 API 文档

        使用一个配置文件

        大多数项目会需要很复杂的设置,这就是为什么 webpack 要支持配置文件。这比在终端(terminal)中输入大量命令要高效的多,所以让我们创建一个取代以上使用 CLI 选项方式的配置文件:

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

        如果 webpack.config.js 存在,则 webpack 命令将默认选择使用它。我们在这里使用 --config 选项只是向你表明,可以传递任何名称的配置文件。这对于需要拆分成多个文件的复杂配置非常有用。

        比起 CLI 这种简单直接的使用方式,配置文件具有更多的灵活性。我们可以通过配置方式指定 loader 规则(loader rules)、插件(plugins)、解析选项(resolve options),以及许多其他增强功能。了解更多详细信息,请查看配置文档

        NPM 脚本(NPM Scripts)

        考虑到用 CLI 这种方式来运行本地的 webpack 不是特别方便,我们可以设置一个快捷方式。在 package.json 添加一个 npm 脚本(npm script)

        package.json

{
  ...
  "scripts": {
    "build": "webpack"
  },
  ...
}

        现在,可以使用 npm run build 命令,来替代我们之前用到的较长命令。注意,使用 npm 的 scripts,我们可以通过模块名,来引用本地安装的 npm 包,而不是写出完整路径。这是大多数基于 npm 的项目遵循的标准,允许我们直接调用 webpack,而不是去调用 node_modules/webpack/bin/webpack.js。

        现在运行以下命令,然后看看你的脚本别名是否正常运行:

D:\TK_file\mywebpack>npm run build

> mywebpack@1.0.0 build D:\TK_file\mywebpack
> webpack

Hash: 04df2bfde380de0f0826
Version: webpack 2.3.3
Time: 359ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  544 kB       0  [emitted]  [big]  main
   [0] ./~/lodash/lodash.js 540 kB {0} [built]
   [1] (webpack)/buildin/global.js 509 bytes {0} [built]
   [2] (webpack)/buildin/module.js 517 bytes {0} [built]
   [3] ./src/index.js 216 bytes {0} [built]

        通过向 npm run build 命令和你的参数之间添加两个中横线,可以将自定义参数传递给 webpack,例如:npm run build -- --colors

        参考:https://doc.webpack-china.org/guides/getting-started/

标签: webpack
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码