Webpack 入门指南 - 1.安装

Webpack 是目前流行的打包工具,如何安装它呢?

1. 安装 Node Js

首先,Webpack 是基于 NodeJs 的工具,你必须首先安装 NodeJs. NodeJs 仅仅只需要在你的系统中安装一次就可以了。

2. 全局安装 Webpack

我们希望能够在系统的任何文件夹中使用 Webpack,使用的方式是通过 Webpack 命令来完成的,这需要我们全局安装 Webpack。这也只需要安装一次,以后每个项目就不需要重新全局安装了。

$ npm install webpack -g

成功安装之后,你应该能够在任何目录中执行 webpack 命令,如果你还没有项目的配置文件的话,应该会看到当前的 Webpack 版本和一个命令的帮助列表。

> webpack
webpack 1.12.12
Usage: https://webpack.github.io/docs/cli.html

Options:
  --help, -h, -?
  --config
  --context
  --entry
  --module-bind
  --module-bind-post
  --module-bind-pre
  --output-path
  --output-file
  --output-chunk-file
  --output-named-chunk-file
  --output-source-map-file
  --output-public-path
  --output-jsonp-function
  --output-pathinfo
  --output-library
  --output-library-target
  --records-input-path
  --records-output-path
  --records-path
  --define
  --target
  --cache                                                                                           [default: true]
  --watch, -w
  --watch which closes when stdin ends
  --watch-aggregate-timeout
  --watch-poll
  --hot
  --debug
  --devtool
  --progress
  --resolve-alias
  --resolve-loader-alias
  --optimize-max-chunks
  --optimize-min-chunk-size
  --optimize-minimize
  --optimize-occurence-order
  --optimize-dedupe
  --prefetch
  --provide
  --labeled-modules
  --plugin
  --bail
  --profile
  -d                                    shortcut for --debug --devtool sourcemap --output-pathinfo
  -p                                    shortcut for --optimize-minimize
  --json, -j
  --colors, -c
  --sort-modules-by
  --sort-chunks-by
  --sort-assets-by
  --hide-modules
  --display-exclude
  --display-modules
  --display-chunks
  --display-error-details
  --display-origins
  --display-cached
  --display-cached-assets
  --display-reasons, --verbose, -v

Output filename not configured.
PS C:\study\webpack\w1>

注意,最后还提示你,当前没有找到 webpack 配置文件。

3. 在项目中安装 Webpack

最好在你的项目中也包含一份独立的 Webpack,这样你更方便管理你的项目。为什么又是全局安装,又是局部安装呢?可以参考这里的说明

3.1 确认创建 NPM 项目文件

首先,你需要已经创建了 NPM 的项目文件,如果没有的话,使用 init 命令创建它。

 npm init

你需要回答一系列问题。最终你会得到一个名为 package.json 的 NPM 项目文件,如果你愿意的话,手工创建它也不错。甚至你可以直接复制一个过来。

一个新创建的 package.json 内容应该如下所示。

{
  "name": "w1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {},
  "devDependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

3.2 在项目中安装 Webpack

现在,可以在项目中安装 Webpack 了,直接使用 NPM 的 install 命令。

npm install webpack --save-dev

--save-dev 的意思是说 webpack 是一个开发工具,我们需要将这一点保存到 package.Json 文件中。

install 命令可以简化为单个字符 i,注意是小写的 i。

--save-dev 还可以简化为大写的 S,写成 -S,你可以在这里查看 instal 的更详细使用说明

npm i webpack --S

你应该看到一个长长的输出,这是由于 Webpack 是一个很复杂的工具。它依赖很多的其它工具。

> npm install webpack --save-dev
[email protected]1.0.0 w1
`-- [email protected]1.13.2
  +-- [email protected]3.3.0
  +-- [email protected]1.5.2
  +-- [email protected]1.0.2
  +-- [email protected]0.9.1
  | +-- [email protected]4.1.9
  | `-- [email protected]0.2.0
  +-- [email protected]0.6.6
  +-- [email protected]0.2.16
  | +-- [email protected]3.1.3
  | +-- [email protected]2.1.0
  | +-- [email protected]0.5.0
  | `-- object[email protected]4.1.0
  +-- [email protected]0.3.0
  | +-- [email protected]0.1.4
  | | `-- [email protected]0.0.0
  | `-- [email protected]2.1.5
  |   +-- [email protected]1.0.0
  |   +-- [email protected]1.0.2
  |   +-- [email protected]2.0.3
  |   +-- [email protected]1.0.0
  |   +-- [email protected]1.0.7
  |   `-- [email protected]1.0.2
  +-- [email protected]0.5.1
  | `-- [email protected]0.0.8
  +-- [email protected]0.6.0
  | +-- [email protected]1.4.1
  | +-- [email protected]0.1.4
  | | `-- [email protected]0.2.9
  | +-- [email protected]4.9.1
  | | +-- [email protected]1.2.0
  | | `-- [email protected]1.1.8
  | +-- [email protected]1.1.0
  | | `-- date[email protected]0.1.4
  | +-- [email protected]0.0.1
  | +-- [email protected]3.2.8
  | | +-- [email protected]2.0.1
  | | +-- [email protected]0.2.0
  | | `-- [email protected]2.2.6
  | +-- [email protected]1.1.7
  | +-- [email protected]1.1.1
  | +-- [email protected]1.7.0
  | | `-- [email protected]0.2.1
  | +-- [email protected]0.0.0
  | +-- [email protected]0.1.2
  | +-- [email protected]0.0.0
  | +-- [email protected]0.11.9
  | +-- [email protected]1.4.1
  | +-- [email protected]0.2.1
  | +-- [email protected]1.1.14
  | | `-- [email protected]0.0.1
  | +-- [email protected]1.0.0
  | | `-- [email protected]1.1.14
  | |   `-- [email protected]0.0.1
  | +-- [email protected]0.10.31
  | +-- [email protected]1.4.2
  | +-- [email protected]0.0.0
  | +-- [email protected]0.10.3
  | | +-- [email protected]1.3.2
  | | `-- [email protected]0.2.0
  | +-- [email protected]0.10.3
  | | `-- [email protected]2.0.1
  | `-- [email protected]0.0.4
  |   `-- [email protected]0.0.1
  +-- [email protected]0.6.1
  | `-- [email protected]0.0.3
  +-- [email protected]3.1.2
  | `-- [email protected]1.0.0
  +-- [email protected]0.1.10
  +-- [email protected]2.6.4
  | +-- [email protected]0.2.10
  | +-- [email protected]0.5.6
  | +-- [email protected]1.0.2
  | `-- [email protected]3.10.0
  |   +-- [email protected]1.2.1
  |   +-- [email protected]2.1.0
  |   | +-- [email protected]0.1.3
  |   | | +-- [email protected]0.1.4
  |   | | | +-- [email protected]1.0.1
  |   | | | `-- repeat-string@1.5.4
  |   | | `-- [email protected]1.0.4
  |   | +-- [email protected]0.1.3
  |   | `-- [email protected]0.0.2
  |   +-- [email protected]1.2.0
  |   `-- [email protected]0.1.0
  +-- [email protected]0.2.9
  | +-- [email protected]0.9.2
  | `-- [email protected]1.6.1
  |   +-- [email protected]1.3.0
  |   | +-- [email protected]1.0.1
  |   | `-- [email protected]2.3.11
  |   |   +-- arr-diff@2.0.0
  |   |   | `-- [email protected]1.0.1
  |   |   +-- [email protected]0.2.1
  |   |   +-- [email protected]1.8.5
  |   |   | +-- [email protected]1.8.2
  |   |   | | `-- [email protected]2.2.3
  |   |   | |   +-- [email protected]2.1.0
  |   |   | |   +-- [email protected]2.1.0
  |   |   | |   `-- [email protected]1.1.5
  |   |   | +-- [email protected]0.2.0
  |   |   | `-- [email protected]1.1.2
  |   |   +-- [email protected]0.1.5
  |   |   | `-- [email protected]0.1.1
  |   |   +-- [email protected]0.3.2
  |   |   +-- [email protected]2.0.0
  |   |   +-- [email protected]3.0.4
  |   |   | `-- [email protected]1.1.4
  |   |   +-- [email protected]2.0.1
  |   |   +-- object[email protected]2.0.0
  |   |   | +-- for[email protected]0.1.4
  |   |   | | `-- for-in@0.1.6
  |   |   | `-- [email protected]0.1.1
  |   |   +-- [email protected]3.0.4
  |   |   | +-- [email protected]0.3.0
  |   |   | `-- [email protected]1.0.2
  |   |   `-- [email protected]0.4.3
  |   |     +-- [email protected]0.1.3
  |   |     `-- [email protected]2.0.0
  |   +-- [email protected]1.0.1
  |   +-- [email protected]2.0.0
  |   +-- [email protected]1.0.1
  |   | `-- [email protected]1.7.0
  |   +-- [email protected]2.0.1
  |   | `-- [email protected]1.0.0
  |   +-- [email protected]1.0.1
  |   `-- [email protected]2.1.0
  |     +-- [email protected]3.0.3
  |     | `-- [email protected]1.1.6
  |     |   +-- [email protected]0.4.2
  |     |   `-- [email protected]0.0.1
  |     `-- [email protected]1.0.1
  `-- [email protected]0.6.8
    +-- [email protected]0.1.6
    `-- [email protected]0.4.4
      `-- [email protected]1.0.0

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]1.0.14
npm WARN [email protected]1.0.0 No description
npm WARN [email protected]1.0.0 No repository field.
>

这时候,你再检查一下 package.json 文件,它应该多了三行。

{
  "name": "w1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {},
  "devDependencies": {
    "webpack": "^1.13.2"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

4.  Hello, Webpack

4.1 打包普通脚本文件

写一段普通的脚本,例如,一个 Hellowrold 脚本。当然了,这里应该是 Hello,Webpack.

function hello(){
    alert("Hello, Webpack!");
}

保存到你的项目根目录中,文件名就叫 hello.js

4.2 创建 Webpack 配置文件

Webpack 根据配置文件的配置来完成打包,默认的配置文件名称是 webpack.config.js。

Webpack 的工作很简单,就是打包,你需要告诉它打包的内容,还有输出到哪里。entry 就是入口,显然 output 就是输出。

我们让 Webpack 将 hello.js 文件打包后输出到 bundle.js 文件中。

module.exports = {
  // 入口
  entry: "./hello.js",
  // 输出的文件名
  output: {
    filename: ‘bundle.js‘
  }
};

在命令窗口,输入 webpack 回车执行。应该会看到如下的输出。

> webpack
Hash: 05c39d9076887c35f015
Version: webpack 1.13.2
Time: 59ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.44 kB       0  [emitted]  main
   [0] ./hello.js 51 bytes {0} [built]
>

默认的入口文件名为 index.js,如果你将 hello.js 改名为 index.js,还可以直接使用目录名,不用提供文件名。

module.exports = {
  // 入口,默认入口文件名为 index.js
  entry: ".",
  // 输出的文件名
  output: {
    filename: ‘bundle.js‘
  }
};

生成的 bundle.js 文件内容为

/******/ (function(modules) { // webpackBootstrap
/******/     // The module cache
/******/     var installedModules = {};

/******/     // The require function
/******/     function __webpack_require__(moduleId) {

/******/         // Check if module is in cache
/******/         if(installedModules[moduleId])
/******/             return installedModules[moduleId].exports;

/******/         // Create a new module (and put it into the cache)
/******/         var module = installedModules[moduleId] = {
/******/             exports: {},
/******/             id: moduleId,
/******/             loaded: false
/******/         };

/******/         // Execute the module function
/******/         modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);

/******/         // Flag the module as loaded
/******/         module.loaded = true;

/******/         // Return the exports of the module
/******/         return module.exports;
/******/     }

/******/     // expose the modules object (__webpack_modules__)
/******/     __webpack_require__.m = modules;

/******/     // expose the module cache
/******/     __webpack_require__.c = installedModules;

/******/     // __webpack_public_path__
/******/     __webpack_require__.p = "";

/******/     // Load entry module and return exports
/******/     return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports) {

    function hello(){
        alert("Hello, Webpack!");
    }

/***/ }
/******/ ]);

最后就是我们的脚本。

4.2 将脚本嵌入到网页中

刚刚只是一段脚本,还需要放到网页中才能执行。我们可以安装一个自动帮我们生成宿主网页的 webpack 插件 html-webpack-plugin 来帮助我们。

npm install html-webpack-plugin --save-dev

应该会看到如下的输出。

> npm install html-webpack-plugin --save-dev
[email protected]1.0.0 w1
`-- [email protected]2.24.0
  +-- [email protected]3.4.6
  +-- [email protected]3.1.0
  | +-- change-case@3.0.0
  | | +-- camel-case@3.0.0
  | | +-- constant-case@2.0.0
  | | +-- dot-case@2.1.0
  | | +-- header-case@1.0.0
  | | +-- is-lower-case@1.1.3
  | | +-- is-upper-case@1.1.2
  | | +-- lower-case@1.1.3
  | | +-- lower-case[email protected]1.0.2
  | | +-- no-case@2.3.0
  | | +-- param-case@2.1.0
  | | +-- pascal-case@2.0.0
  | | +-- path-case@2.1.0
  | | +-- sentence-case@2.1.0
  | | +-- snake-case@2.1.0
  | | +-- swap-case@1.1.2
  | | +-- title-case@2.1.0
  | | +-- upper-case@1.1.3
  | | `-- upper-case[email protected]1.1.2
  | +-- [email protected]3.4.20
  | | +-- [email protected]2.8.1
  | | `-- [email protected]0.4.4
  | +-- [email protected]2.9.0
  | | `-- graceful-readlink@1.0.1
  | +-- [email protected]1.1.0
  | +-- [email protected]1.0.0
  | | `-- xml-char[email protected]1.0.0
  | +-- [email protected]0.2.7
  | `-- [email protected]2.7.3
  |   `-- [email protected]0.2.10
  +-- [email protected]4.16.4
  +-- [email protected]2.0.2
  | +-- [email protected]2.0.0
  | | +-- css-select@1.2.0
  | | | +-- [email protected]1.0.0
  | | | +-- [email protected]2.1.0
  | | | +-- [email protected]1.5.1
  | | | | `-- [email protected]0.1.0
  | | | |   +-- [email protected]1.1.3
  | | | |   `-- [email protected]1.1.1
  | | | `-- [email protected]1.0.1
  | | +-- [email protected]0.1.4
  | | | `-- [email protected]0.3.3
  | | +-- [email protected]3.3.0
  | | | +-- [email protected]1.3.0
  | | | +-- [email protected]2.1.0
  | | | +-- [email protected]1.1.6
  | | | `-- [email protected]1.0.34
  | | |   `-- [email protected]0.0.1
  | | +-- [email protected]3.0.1
  | | | `-- [email protected]2.0.0
  | | `-- [email protected]0.3.3
  | `-- [email protected]0.4.0
  `-- [email protected]1.0.0

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]1.0.14
npm WARN [email protected]1.0.0 No description
npm WARN [email protected]1.0.0 No repository field.
>

这说明这个插件安装好了。

配置 Webpack 使用这个插件,帮助我们生成一个网页,然后将打包的脚本自动插入到这个网页中。

var HtmlwebpackPlugin = require(‘html-webpack-plugin‘);

module.exports = {
  // 入口
  entry: ".",
  // 输出的文件名
  output: {
    filename: ‘bundle.js‘
  },
  // 添加我们的插件 会自动生成一个html文件
  plugins: [
    new HtmlwebpackPlugin({
      title: ‘Hello Webpack‘
    })
  ]
};

其实,这个配置文件就是一段程序,注意第一行,一定要加上。

重新执行 webpack 命令。你会看到多生成了一个名为 index.html 的网页。

> webpack
Hash: 05c39d9076887c35f015
Version: webpack 1.13.2
Time: 560ms
     Asset       Size  Chunks             Chunk Names
 bundle.js    1.44 kB       0  [emitted]  main
index.html  184 bytes          [emitted]
   [0] ./index.js 51 bytes {0} [built]
Child html-webpack-plugin for "index.html":
        + 3 hidden modules
>

打开这个网页,检查插入的脚本引用。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello Webpack</title>
  </head>
  <body>
  <script type="text/javascript" src="bundle.js"></script></body>
</html>

5. 总结

Webpack 是一个基于 NodeJs 的打包工具,我们可以使用它帮助我们将脚本打包,它还可以帮助我们生成宿主网页,并自动将打包之后的脚本嵌入到这个网页中。

附录:

html-webpack-plugin 插件的使用说明

时间: 2024-10-10 08:24:23

Webpack 入门指南 - 1.安装的相关文章

Webpack 入门指南 - 3. Hello, Angular2!

Webpack 入门指南 - 1.安装 Webpack 入门指南 - 2.模块 这一次,我们使用 Webpack 来打包 Angular 2 的应用. 与官方的 Hello, Angular 2 项目相比,我们不使用 System.js,而是使用 TypeScript 直接编译,然后使用 Webpack 打包生成代码. 1. 下载 Angular 2 以及依赖包 修改我们的 package.json 文件,添加 Angular 2 涉及的包,和 Angular 2 所依赖的包,以后,我们可以慢慢

一小时包教会 —— webpack 入门指南

什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 我们可以直接使用 require(XXX) 的形式来引入各模块,即使它们可能需要经过编译(比如JSX和sass),但我们无须在上面花费太多心思,因为 webpack 有着各种健全的加载器(loader)在默默处理这些事情,这块我们后续会提到. 你可以不打算将其用在你的项目上,但没有理由不去掌握它,因为以近期

160816、webpack 入门指南

什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 我们可以直接使用 require(XXX) 的形式来引入各模块,即使它们可能需要经过编译(比如JSX和sass),但我们无须在上面花费太多心思,因为 webpack 有着各种健全的加载器(loader)在默默处理这些事情,这块我们后续会提到. 你可以不打算将其用在你的项目上,但没有理由不去掌握它,因为以近期

Webpack 入门指南 - 2.模块

这一次我们谈谈模块问题. 通常我们希望这个项目可以分为多个独立的模块,比如,上一次提高的 hello 函数,如果我们定义为一个模块,其它模块引用之后,直接调用就好了.在前端怎么使用模块呢?这可说来话长了. 如果我们把 hello 函数定义在文件 hello.js 中,内容如下: function hello(){ alert("Hello, Webpack!"); } 然后把主入口函数 index.js 的内容写成下面的内容,你应该会得到一个错误信息. require("./

webpack入门指南-step04

一.建立项目 建一个文件夹,然后新建一个package.json的文件在项目根目录下 如果你使用git管理你的这个项目的话,建议你新建一个.gitignore文件,不要让git提交一些node依赖的模块, 你也可以参考github的例子 https://github.com/github/gitignore/blob/master/Node.gitignore 我们这里就简单一点 二.项目结构 现在项目里面就有一个package.json, 我们多加一点东西,慢慢丰富它的内容. /app ind

webpack入门指南-step03

一.webpack 的使用 webpack简单点来说就就是一个配置文件,所有的魔力都是在这一个文件中发生的. 这个配置文件主要分为三大块 entry 入口文件 让webpack用哪个文件作为项目的入口 output 出口 让webpack把处理完成的文件放在哪里 module 模块 要用什么不同的模块来处理各种类型的文件 二.webpack 常用命令 webpack的使用和browserify有些类似,下面列举几个常用命令: webpack          最基本的启动webpack命令 we

webpack 入门指南

什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 我们可以直接使用 require(XXX) 的形式来引入各模块,即使它们可能需要经过编译(比如JSX和sass),但我们无须在上面花费太多心思,因为 webpack 有着各种健全的加载器(loader)在默默处理这些事情,这块我们后续会提到. 你可以不打算将其用在你的项目上,但没有理由不去掌握它,因为以近期

webpack入门指南

什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 我们可以直接使用 require(XXX) 的形式来引入各模块,即使它们可能需要经过编译(比如JSX和sass),但我们无须在上面花费太多心思,因为 webpack 有着各种健全的加载器(loader)在默默处理这些事情,这块我们后续会提到. 你可以不打算将其用在你的项目上,但没有理由不去掌握它,因为以近期

转载------一小时包教会 —— webpack 入门指南

本文写的蛮好,转载地址:http://www.w2bc.com/Article/50764 其他的地址: http://webpack.github.io/docs/usage-with-gulp.html http://webpack.github.io/docs/usage-with-grunt.html