Webapck快速入门

什么是Webpack？

多年来，Web开发从具有少量资产和少量JavaScript的网页发展为具有复杂JavaScript和大依赖性树（依赖多个其他文件的文件）的全功能Web应用程序。为了应对日益复杂的社会问题，社区提出了不同的方法和实践，例如：

  • 在JavaScript中使用模块，使我们能够将程序分成几个文件。
  • JavaScript预处理器（允许你使用浏览器原生不支持的最新的CSS和JavaScript中的特性）和编译成JavaScript的语言（例如CoffeeScript）

但是，这些进步虽然非常有帮助，但却带来了开发过程中额外步骤的需要：我们需要将这些文件捆绑在一起并将其转换（浏览/编译）为浏览器可以理解的内容。这就是Webpack这样的工具所必需的。

Webpack是一个模块打包工具：可以分析你的项目结构，查找JavaScript模块和其他资源，将其打包并打包到浏览器。

Webpack、Grunt和Gulp都是如何构建的？

Webpack不同于自动构建或像Grunt和Gulp这样的工具，因为它本身不是一个构建工具，但它可以取代它们的优点。

Grunt和Gulp等工具通过查找与你的配置匹配的文件路径进行构建。在配置文件中，还需要指定应该运行的任务和步骤，以便转换，合并或压缩这些文件。


Grunt和Gulp

而Webpack是分析你的项目的整体结构。 给定一个开始的主文件，Webpack会查看所有项目的依赖关系（通过JavaScript中的require和import语句），使用加载器处理它们，并生成一个捆绑的JavaScript文件。


Webpack

Webpack的方法更快，更直接。 而且，正如你将在本章后面看到的，打开了捆绑不同文件类型的许多新的可能性。

开始使用Webpack

全局安装

$ npm install -g webpack

或局部安装

# cd webpack-demo
$ npm install --save-dev webpack

示例项目

# 1.创建一个空文件夹
$ mkdir webpack-demo && cd webpack-demo
# 2.创建一个package.json文件 - 一个标准的npm清单，它包含有关项目的各种信息，并让开发者指定依赖项（可以自动下载和安装）并定义脚本任务。
$ npm init
# 3.将webpack添加为项目依赖项，并使用以下命令进行安装
$ npm install --save-dev webpack
# 4.创建两个目录（app和public)和三个文件（Greeter.js, main.js, index.html）
$ mkdir app && cd app
$ touch Greeter.js
$ touch main.js
$ mkdir public && cd public
$ touch index.html

最后，项目结构如下图所示：


项目结构

index.html源码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Webpack Demo</title>
  </head>
  <body>
    <div id='root'>
    </div>
    <script src="bundle.js"></script>
  </body>
</html>

Greeter.js源码：

module.exports = function() {
  var greet = document.createElement('div');
  greet.textContent = "Hi there and greetings!";
  return greet;
};

main.js源码：

var greeter = require('./Greeter.js');
document.getElementById('root').appendChild(greeter());

运行构建

node_modules/.bin/webpack app/main.js public/bundle.js
输出

访问

配置Webpack（可选）

Webpack有许多不同的和高级的选项，允许使用加载器和插件来对加载的模块进行转换。尽管可以使用webpack和命令行中的所有选项，但是这个过程往往会变得缓慢且容易出错。一个更好的方法是定义一个配置文件 - 一个简单的JavaScript模块，然后在其中放置与构建相关的所有信息。

现在在示例项目中创建一个名为webpack.config.js的文件。Webpack配置文件必须有入口文件和bundle文件的输出目录：

$ touch webpack.config.js

webpack.config.js 源码：

module.exports = {
  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  }
}

注意：“__dirname”是一个包含当前正在执行的脚本所在目录的名称的node.js全局变量。

现在你可以简单地在终端上运行“webpack”，而无需任何参数 - 因为现在有一个webpack.config文件，webpack命令将根据可用的配置构建你的应用程序。 命令的结果应该如下所示：

$ node_modules/.bin/webpack
输出

npm 启动（可选）

执行诸如“node_modules/.bin/webpack”之类的长命令容易出错。值得庆幸的是，npm可以作为一个任务运行者，可以通过npm start隐藏冗长的脚本。这可以通过设置一个脚本部分到package.json来实现，如下所示：

package.json

请注意，在package.json文件中配置的所有脚本已经在路径中具有“node_modules/.bin”文件夹，因此你不必使用完整路径显式调用所需的命令。

输出

配置Source Map

Source map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码。这无疑给开发者带来了很大方便。

将所有项目的JavaScript模块打包成一个（或几个）bundle文件以便在浏览器上使用时会带来很多好处，但一个明显的缺点是，当在浏览器中进行调试时你将无法在原始文件中找到映射。好在Webpack可以在绑定时生成源映射（source map） - 源映射提供了将绑定文件中的代码映射回其原始源文件的方法，使代码更易读，更易于在浏览器中调试。

要将Webpack配置为生成指向原始文件的源映射，请使用以下选项之一的“devtool”设置

devtool选项
  • source-map：在单独的文件中生成完整的全功能源映射。这个选项具有最好的源图质量，但是它确实减慢了构建过程。
  • cheap-module-source-map：在不带列映射的单独文件中生成源映射。剥离列映射有利于构建却不便于调试：浏览器开发人员工具只能指向原始源代码的行，而不能指向特定的列（或字符）。
  • eval-source-map：使用“eval”将源代码模块捆绑在一起，在同一个文件中嵌套完整的源映射。这个选项确实会生成一个全功能的源映射，且不会对构建时间产生很大的影响，但是在JavaScript执行中会带来性能和安全方面的缺陷。虽然在开发过程中使用这个选项是一个不错的选择，但是这个选项不应该在生产中使用。
  • cheap-module-eval-source-map：在构建期间生成源映射的最快方法。生成的源映射将使用相同的捆绑JavaScript文件进行内联，而不使用列映射。和前面的选项一样，JavaScript执行时间也有缺陷，所以这个选项不适合生成生产就绪包。

这些选项是从最慢的构建时间到最快的排序的。 学习和中小型项目中，“eval-source-map”是一个很好的选择。

module.exports = {
  devtool: 'eval-source-map',
  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  }
}

本地服务webpack-dev-server

Webpack有一个可选的服务器用于本地开发。它是一个小型的node.js express应用程序，可以根据你的webpack配置提供服务和构建，并将其保存在内存中，在更改源文件时自动刷新浏览器。这是一个单独的npm模块，应该作为项目依赖项安装：

$ npm install --save-dev webpack-dev-server

webpack dev服务器可以在webpack.config.js配置文件中的devserver键下配置。 配置设置包括：

module.exports = {
  devtool: 'eval-source-map',
  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  },
  devServer: {
    contentBase: "./public",
    colors: true,
    historyApiFallback: true,
    inline: true
  } 
}

现在执行“webpack-dev-server”命令代替webpack来启动服务器：

node_modules/.bin/webpack-dev-server
输出

为方便起见，可以修改package.json中的start命令如下

package.json

“--progress”参数仅在命令行中可用。构建时会在终端中显示进度。

加载器Loaders

通过使用加载器，webpack可以通过外部脚本和工具对源文件进行预处理以应用各种变化和转换。例如:

  • 将JSON文件解析为普通JavaScript
  • 将ES6转换成当前浏览器可以理解的常规JavaScript。
  • React的JSX转换成普通的JavaScript。

加载器需要单独安装，并应在webpack.config.js中的module键下进行配置。其设置包括：

  • test：一个正则表达式，通过匹配文件扩展名获取加载器运行的文件（必需）。
  • loader：加载器的名称（必需）。
  • include / exclude：可选设置，手动设置加载器应显式添加或忽略的文件夹和文件。
  • query：查询设置可用于将其他选项传递给加载器。

首先安装Webpack的json加载器模块：

$ npm install --save-dev json-loader

然后修改配置文件：

module.exports = {
  devtool: 'eval-source-map',
  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  },
  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: "json-loader"
      }
    ]
  },
  devServer: {
    contentBase: "./public",
    colors: true,
    historyApiFallback: true,
    inline: true
  }
}

最后创建一个json文件

$ cd ./app && touch config.json

config.json：

{
  "greetText": "Hi vincent and greetings from JSON!"
}

Greeter.js：

var config = require('./config.json');
module.exports = function () {
  var greet = document.createElement('div');
  greet.textContent = config.greetText;
  return greet;
};

Babel

Babel是一个JavaScript编译和工具的平台。 通过它你可以：

  • 使用所有浏览器尚未完全支持的JavaScript（ES6 / ES2015，ES7 / ES2016等）的下一个版本。
  • 使用JavaScript语法扩展，如React的JSX。

安装和配置

Babel是模块化的，分布在不同的npm模块中。核心功能可以在“babel-core”npm包中找到，与webpack的集成可以通过npm包“babel-loader”获得，对于想要提供给代码的每种类型的功能和扩展，需要安装一个单独的包（最常见的是babel-preset-es2015和babel-preset-react，分别用于编译ES6和React的JSX）。

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-stage-0 babel-preset-react

npm install --save react react-dom

module.exports = {
  devtool: 'eval-source-map',
  entry: __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  },
  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: "json-loader"
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015', 'react', 'stage-0']
        }
      }
    ]
  },
  devServer: {
    contentBase: "./public",
    historyApiFallback: true,
    inline: true
  }
}

Greeter.js：

import React, { Component } from 'react';
import config from './config.json';
export default class Greeter extends Component {
  alertGreeting = () => {
    const greetings = config.greetText
    alert(`greetings:${greetings}`);
  }
  render() {
    return (
      <div onClick={this.alertGreeting}>
        {config.greetText}
      </div>
    )
  }
}

main.js：

import React from 'react';
import {render} from 'react-dom';
import Greeter from './Greeter';
render(<Greeter />, document.getElementById('root'));

Babel配置文件

由于在项目后期中Babel可能有很多配置设置选项和组合，在同一个文件中处理所有内容可能会很麻烦。许多开发人员选择创建一个单独的babel资源配置，即一个“.babelrc”文件。首先，从webpack.config.js文件中删除预设配置，仅保留基本的加载器设置：

module.exports = {
  devtool: 'eval-source-map',
  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/public",
    filename: "bundle.js"
  },
  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: "json-loader"
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      }
    ]
  },
  devServer: {...} 
}

.babelrc：

{
  "presets": [
    "es2015",
    "react",
    "stage-0"
  ]
}

Webpack可以将每一种文件都视为一个模块 - 使用合适的装载器，JavaScript代码，CSS，字体，都可以被视为模块。 Webpack可以通过所有依赖树追踪CSS中@import和URL值，然后构建，预处理和捆绑资源。

Stylesheets

Webpack提供了两个加载器来处理样式表：css-loader和style-loader。css-loader查找@import和url语句并解析它们时，style-loader将所有计算的样式规则添加到页面中。结合在一起，这些加载器使你能够将样式表嵌入到Webpack JavaScript包中。

安装

$ npm install --save-dev style-loader css-loader

module.exports = {
  devtool: 'eval-source-map',
  entry:  __dirname + "/app/main.js",
  output: {
    path: __dirname + "/build",
    filename: "bundle.js"
  },
  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: "json-loader"
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      }
    ]
  },
  devServer: {...}
}

感叹号（“！”）可用于加载程序配置，以将不同的加载器链接到相同的文件类型。

创建文件

$ touch main.css

main.css：

html {
  box-sizing: border-box;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body {
  margin: 0;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: brown;
}
h1, h2, h3, h4, h5, h6, p, ul {
  margin: 0;
  padding: 0;
}

main.js：

import React from 'react';
import {render} from 'react-dom';
import Greeter from './Greeter';
import './main.css';
render(<Greeter />, document.getElementById('root'));

默认情况下，你的CSS规则将与JavaScript文件捆绑在一起 - 它不会生成一个单独的CSS捆绑文件。

CSS 模块

通过使用CSS模块，所有类名称和动画名称都默认在本地范围内生效。Webpack从一开始就通过CSS加载器支持CSS模块，我们只需通过传递“modules”查询字符串启用此功能，并且可以将CSS类中的类名导出到本地范围的组件代码中。

module.exports = {
  devtool: 'eval-source-map',
  entry:  __dirname + "/app/main.js",
  output: {...},
  module: {
    loaders: [
      {
        test: /\.json$/,
        loader: "json-loader"
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader?modules'
      }
    ]
  },
  devServer: {...}
}

接下来，让我们创建一个CSS文件（带有专门用于Greeter组件的样式规则），并将这些规则导入到Greeter.js React模块中。

$ touch Greeter.css

Greeter.css：

.root {
  background-color: yellow;
  padding: 10px;
  border: 3px solid #ccc;
}

注意在上面的代码中，css类是如何被导入到一个变量（styles）中的，并被单独应用到一个JSX元素上。还要注意，任何具有自己独立CSS模块的其他组件也可以使用相同的类名称而不受干扰：即使是非常常见的样式名称，例如“root”，“header”，“footer” 在本地范围内安全使用。

结果

待续...

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 199,340评论 5赞 467
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 83,762评论 2赞 376
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 146,329评论 0赞 329
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 53,678评论 1赞 270
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 62,583评论 5赞 359
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 47,995评论 1赞 275
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,493评论 3赞 390
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,145评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,293评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,250评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,267评论 1赞 328
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,973评论 3赞 316
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,556评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,648评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,873评论 1赞 255
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,257评论 2赞 345
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 41,809评论 2赞 339