webpack 入门

Webpack 是一个模块绑定器,它读取具有依赖关系的模块并生成表示这些模块的静态资产。

它具有可扩展的加载器系统 ,允许绑定包不仅包括 Javascript 资产,还包括 CSS,图像,HTML 等等。

例如,使用内置的 Javascript 加载器, css-loaderurl-loader

require("./code.js") // Load Javascript dependency
var css = require("./styles.css"); // Load CSS as a string
var base64Image = require("./image.png"); // Load an image as a base64 string

将成为单个绑定文件:

// From code.js
console.log("Hello, World");
// From styles.css
var css = "body { margin: 0; padding: 0; } h1 { color: #FF0000; }";
// From image.png
var base64Image = "data:image/gif;base64,R0lGODlhPQBEAPeoAJosM//AwO/AwHVYZ/z595kzAP/s7P+goOXMv8+fhw/v739/f+8PD98fH/8mJl+fn/9ZWb8/PzWlwv///6wWGbImAPgTEMImIN9gUFCEm/gDALULDN8PAD6atYdCTX9gUNKlj8wZAKUsAOzZz+UMAOsJAP/Z2ccMDA8PD/95eX5NWvsJCOVNQPtfX/8zM8+QePLl38MGBr8JCP+zs9myn/8GBqwpAP/GxgwJCPny78lzYLgjAJ8vAP9fX...";

可以在任何最常见的模块样式(CommonJS 和 AMD)中定义依赖关系。