综合文章

先看一个例子

// webpack.config.js
module.exports = {
    // 入口
    entry: {
        'index': './index.js'
    },
    // 输出
    output: {
        path: './',
        /*
            [name] 是 entry 中的 key
            entry: {
                key: value
            }
        */
        filename: "[name].b.js"
    }
};

  
        @CodePoet: 代码已经复制到剪贴板

module.exports 是 CommonJS 规范中定义一个文件对外接口的语法，webpack.config.js 文件对外的接口是一个 object ，其中定义了一些配置参数。

# 一、参数详解

# 1.1 entry

最初 webpack 是为了构建 SPA (Single Page Application) ，entry 是『入口』配置。在 entry 中的文件才会被编译。

# 1.2 output

output 控制构建后的文件的存放位置和命名。 path 定义所有构建后文件的所在目录，本例中构建到当前文件夹。

# 1.3 filename

filename 控制构建后文件的文件名

# 1.4 源码和构建结果

// index.js
var content = require("./content.js")

document.body.innerHTML = document.body.innerHTML + content

  
        @CodePoet: 代码已经复制到剪贴板
    
// content.js
module.exports = "some string"

  
        @CodePoet: 代码已经复制到剪贴板
    
<body>
<a target="_blank" href="https://github.com/nimojs/webpack-book/blob/gh-pages/1-modules/README.md">本例说明</a>
<script src="index.b.js"></script>
</body>

  
        @CodePoet: 代码已经复制到剪贴板

建议尽量理解构建后的代码，这样有助于理解 webpack

/******/ (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, __webpack_require__) {

	var content = __webpack_require__(1)

	document.body.innerHTML = document.body.innerHTML + content

/***/ },
/* 1 */
/***/ function(module, exports) {

	module.exports = "some string"

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

  
        @CodePoet: 代码已经复制到剪贴板

前面带 /******/的代码都是 webpack的模块化代码，它内置了一个模块加载器

模块 0 是 index.js 的代码，模块 1 是 require("./content.js") 的代码。如果你再 require 一个模块那么就会有模块 3。

# 二、JS包含样式

安装时间可能会比较久

# 安装所需 style-loader 和 css-loader
npm install css-loader style-loader -D

# less 和 less-loader 可以选择不安装 （如果安装了请去掉 index.js 中引入 less 的注释）
npm install less-loader -D
npm install less -g

  
        @CodePoet: 代码已经复制到剪贴板
    
webpack --watch

  
        @CodePoet: 代码已经复制到剪贴板
    
module.exports = {
    entry: {
        'index': './index.js'
    },    
    output: {
        path: './',
        filename: "[name].b.js"
    },
    module: {
        loaders: [
            {
                test: /\.css$/,
                loader: "style!css"
            },
            {
                test: /\.less$/,
                loader: "style!css!less"
            }
        ]
    }
};

  
        @CodePoet: 代码已经复制到剪贴板

module.loaders 定义 require 的模块代码会被如何编译。 官方文档 using-loaders

# 2.1 module.loaders[].test

test 参数是一个正则表达式，用于匹配模块。'./index.css'.test(/\.css&/)

# 2.2 module.loaders[].loader

loader 参数定义被 test 匹配到的模块会执行哪些构建操作

本例中 .css 后缀的文件会被 style-loader 和 css-loader 构建

# 2.3 require 时配置 loader

如果你不想在 webpack.config.js 配置，你还可以在 require 时单独定义一个文件会使用哪些 loader

require('!style!css!./index.css')

  
        @CodePoet: 代码已经复制到剪贴板

# 2.4 被嵌入 <head>

查看 在线预览构建结果页面 源码可以看到样式通过 JS 嵌入到 <head> 中使用的

<head>
<style type="text/css">body {
    background-color:#ABCDEF;
}</style>
</head>

  
        @CodePoet: 代码已经复制到剪贴板

# 三、JS包含图片

npm install url-loader file-loader -D

  
        @CodePoet: 代码已经复制到剪贴板
    
webpack --watch

  
        @CodePoet: 代码已经复制到剪贴板

代码解释待补充

# 四、使用全局变量

webpack -w

  
        @CodePoet: 代码已经复制到剪贴板

# 五、暴露全局变量

有些模块依赖全局变量 windows.jQuery 才能使用，可以通过 expose-loader 暴露全局变量

npm install jquery --save
npm install expose-loader -D

  
        @CodePoet: 代码已经复制到剪贴板
    
webpack -w

  
        @CodePoet: 代码已经复制到剪贴板

# 六、提取单独样式文件

有时候我们需要编译单独的 CSS 文件，这就需要 extract-text-webpack-plugin 插件

npm install extract-text-webpack-plugin -D
npm install style-loader css-loader -D

  
        @CodePoet: 代码已经复制到剪贴板
    
webpack -w

  
        @CodePoet: 代码已经复制到剪贴板

# 七、自动打包公用资源

npm install jquery paging --save

  
        @CodePoet: 代码已经复制到剪贴板
    
webpack -w

  
        @CodePoet: 代码已经复制到剪贴板

# 八、文件指纹 hash

webpack --watch

  
        @CodePoet: 代码已经复制到剪贴板

# 九、异步加载

webpack --watch

  
        @CodePoet: 代码已经复制到剪贴板
阅读全文

← webpack学习总结2 →