一、用 npm 安装 Webpack:
$ npm install webpack -g
二、安装 webpack 依赖:
$ npm install webpack --save-dev
三、创建一个静态页面 index.html 和一个 JS 入口文件 entry.js
然后编译 entry.js 并打包到 bundle.js:
$ webpack entry.js bundle.js
四、Loader:
Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换。
Loader 可以理解为是模块和资源的转换器,它本身是一个函数,接受源文件作为参数,返回转换的结果。
Loader 可以通过管道方式链式调用,每个 loader 可以把资源转换成任意格式并传递给下一个 loader ,但是最后一个 loader 必须返回 JavaScript。
比如,我们要在页面中引入一个 CSS 文件 style.css,首页将 style.css 也看成是一个模块,然后用 css-loader 来读取它,再用 style-loader 把它插入到页面中
安装 loader:
npm install css-loader style-loader
如果每次 require CSS 文件的时候都要写 loader 前缀,是一件很繁琐的事情。我们可以根据模块类型(扩展名)来自动绑定需要的 loader。
将entry.js中的require(“!style!css!./style.css”) 修改为 require(“./style.css”) ,然后执行:
$ webpack entry.js bundle.js --module-bind 'css=style!css'
# 有些环境下可能需要使用双引号
$ webpack entry.js bundle.js --module-bind "css=style!css"
五、配置文件
$ npm init//用来初始化生成一个新的 package.json 文件
$ npm install
然后创建一个配置文件 webpack.config.js:
var webpack = require('webpack')
module.exports = {
entry: './entry.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{test: /\.css$/, loader: 'style!css'}
]
}
}
同时简化 entry.js 中的 style.css 加载方式:
require('./style.css')
最后运行
$ webpack
可以看到 webpack 通过配置文件执行的结果和上一章节通过命令行 webpack entry.js bundle.js –module-bind ‘css=style!css’ 执行的结果是一样的。
六、插件:
插件可以完成更多 loader 不能完成的功能。
插件的使用一般是在 webpack 的配置信息 plugins 选项中指定。
Webpack 本身内置了一些常用的插件,还可以通过 npm 安装第三方插件。
接下来,我们利用一个最简单的 BannerPlugin 内置插件来实践插件的配置和运行,这个插件的作用是给输出的文件头部添加注释信息。
修改 webpack.config.js,添加 plugins:
var webpack = require('webpack')
module.exports = {
entry: './entry.js',
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {
loaders: [
{test: /\.css$/, loader: 'style!css'}
]
},
plugins: [
new webpack.BannerPlugin('This file is created by joyce')
]
}
然后运行 webpack,打开 bundle.js,可以看到文件头部出现了我们指定的注释信息:
/*! This file is created by joyce */
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ ......
七、开发环境:
当项目逐渐变大,webpack 的编译时间会变长,可以通过参数让编译的输出内容带有进度和颜色。
$ webpack --progress --colors
如果不想每次修改模块后都重新编译,那么可以启动监听模式。开启监听模式后,没有变化的模块会在编译后缓存到内存中,而不会每次都被重新编译,所以监听模式的整体速度是很快的。
$ webpack --progress --colors --watch
使用 webpack-dev-server 开发服务是一个更好的选择。它将在 localhost:8080 启动一个 express 静态资源 web 服务器,并且会以监听模式自动运行 webpack,在浏览器打开 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 可以浏览项目中的页面和编译后的资源输出,并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面。
# 安装
$ npm install webpack-dev-server -g
# 运行
$ webpack-dev-server --progress --colors
八、故障处理:
Webpack 的配置比较复杂,很容出现错误,下面是一些通常的故障处理手段。
一般情况下,webpack 如果出问题,会打印一些简单的错误信息,比如模块没有找到。我们还可以通过参数 –display-error-details 来打印错误详情。
$ webpack --display-error-details
Webpack 的配置提供了 resolve 和 resolveLoader 参数来设置模块解析的处理细节,resolve 用来配置应用层的模块(要被打包的模块)解析,resolveLoader 用来配置 loader 模块的解析。
当引入通过 npm 安装的 node.js 模块时,可能出现找不到依赖的错误。Node.js 模块的依赖解析算法很简单,是通过查看模块的每一层父目录中的 node_modules 文件夹来查询依赖的。当出现 Node.js 模块依赖查找失败的时候,可以尝试设置 resolve.fallback 和 resolveLoader.fallback 来解决问题。
module.exports = {
resolve: { fallback: path.join(__dirname, "node_modules") },
resolveLoader: { fallback: path.join(__dirname, "node_modules") }
};
Webpack 中涉及路径配置最好使用绝对路径,建议通过 path.resolve(__dirname, “app/folder”) 或 path.join(__dirname, “app”, “folder”) 的方式来配置,以兼容 Windows 环境。