webpack的安装和配置

webpack的安装和配置

1

安装

首先要安装 Node.js， Node.js 自带了软件包管理器 npm

用npm 安装webpack

npm install webpack -g

此时 Webpack 已经安装到了全局环境下，可以通过命令行 webpack -h 查看相关指令

通常我们会将webpack安装到项目依赖，这样就可以使用本地版本的webpack

//进入项目目录

//确定已有package.json，没有就npm init 创建

npm install webpack --save-dev

//查看webpack 版本信息

npm info webpack

//安装指定版本

webpack css-loader style-loader的安装

npm install css-loader style-loader -D

引用css-loader style-loader

require('./world.js');

require('style-loader!css-loader!./style.css');

2

概念

本质上，webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。

它是高度可配置的，但是，在开始前你需要先理解四个核心概念：

入口(entry)

输出(output)

loader

插件(plugins)

3

webpack配置entry和output

入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

每个依赖项随即被处理，最后输出到称之为bundles的文件中，我们将在下一章节详细讨论这个过程。

可以通过在 webpack 配置中配置 属性，来指定一个入口起点（或多个入口起点）。

output属性告诉 webpack 在哪里输出它所创建的bundles，以及如何命名这些文件。你可以通过在配置中指定一个字段，来配置这些处理过程：

接下来我们看一个 配置的最简单例子：

entry也可以是一个数组

如果是一个数组，会将数组里面的文件一起打包到bundle.js

entry也可以是一个对象。

如果output里filename有三个值：

.[name]是文件名字是entry的键值。

.[hash]是md5加密的值。

.[chunkhash]这里是作为版本号使用。

4

webpack的plugins

每次修改文件，运行之后，都会生成不一样的hash 于chunkhash值，方便上线时静态资源的版本管理。

文件名如果每次运行都是变化的，文件引入的名字也需要变化，使用install html-webpack-plugin插件，安装npm install html-webpack-plugin --save-dev

title: 用来生成页面的 title 元素

filename: 输出的 HTML 文件名，默认是 index.html, 也可以直接配置带有子目录。

template: 模板文件路径，支持加载器，比如 html!./index.html

inject: true 'head' 'body' false ,注入所有的资源到特定的 template 或者 templateContent 中，如果设置为 true 或者 body，所有的 javascript 资源将被放置到 body 元素的底部，'head' 将放置到 head 元素中。

favicon: 添加特定的 favicon 路径到输出的 HTML 文件中。

minify: {} false , 传递 html-minifier 选项给 minify 输出

hash: true false, 如果为 true, 将添加一个唯一的 webpack 编译 hash 到所有包含的脚本和 CSS 文件，对于解除 cache 很有用。

cache: true false，如果为 true, 这是默认值，仅仅在文件修改之后才会发布文件。

showErrors: true false, 如果为 true, 这是默认值，错误信息会写入到 HTML 页面中

chunks: 允许只添加某些块 (比如，仅仅 unit test 块)

chunksSortMode: 允许控制块在添加到页面之前的排序方式，支持的值：'none' 'default' -default:'auto'

excludeChunks: 允许跳过某些块，(比如，跳过单元测试的块)

最终生成

5

webpack的loader

loader让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。

注意，loader 能够 导入任何类型的模块（例如 文件），这是 webpack 特有的功能，其他打包程序或任务执行器的可能并不支持。

在更高层面，在 webpack 的配置中loader有两个目标：

属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。

属性，表示进行转换时，应该使用哪个 loader。

module: {

rules: [

{ test: /\.txt$/, use: 'raw-loader' }

]

}