webpack入门概念
一 概念
1 入口(entry)
入口起点(entry point)提示webpack 应该使用那个模块,来作为构建其内部依赖图得开始。进入入口七点后,webpack 会找出那些模块和库是入口起点(直接和间接)依赖的。
每一项依赖随即被处理,最后输出到称之为bundles的文件中,
可以通过webpack配置中的配置entry属性,来指指定一个入口起点(或多个入口起点)。默认值为 ./src。
webpack.config.文件中
module.exports = { entry:'./path/to/my/entry/file.js' }
2 出口(output)
output 属性告诉webpack再哪里输出它所创建的bundles,以及如何命名这些文件,默认值为 ./dist。基本上,整个应用程序结构,都会被编译到你指定的输出路径的文件夹中,你可以通过再配置中指定一个output字段,来配置这些处理过程:
webpack.config.js
const path = require('path'); module.exports = { entry :'./path/to/my/entry/file.js', output:{ path:path.resolve(_dirname,'dist'), filename:'my_first_webpack.bundle.js' } }
在上面的示例中,我们通过output.path和output.filename两个属性,来告诉webpack bundle的名称以及我们想要bundle生成
(emit)到哪里。可能你想要了解在代码最上面导入的path模块是什么,它是一个node.js的核心模块。用于操作文件路径。
3 loader
loader 让webpack能够处理那些非javascript文件(webpack自身只理解javascript)。loader可以将所有类型的文件转换为webpacck能够处理的有效模块,然后你就可以利用webpack的打包能力,对他们进行处理。
本质上,webpack loader 将所有类型的文件,转化为应用程序的依赖图(和最终的bundle)可以直接引用的模块。
注意 ,loader能够import导入任何类型的模块(例如:.css文件)
在更高层面,在webpack的配置中loader有两个目标:
1 test 属性,用于标识出应该被对应的loader进行转换的某个或某些文件
2 use 属性, 标识进行转换时,应该使用哪一个loader
weback.config.js
const path = require('path'); const config = { output: { filename: 'my-first-webpack.bundle.js' }, module: { rules: [ { test: /\.txt$/, use: 'raw-loader' } ] } }; module.exports = config;
以上配置中,对一个单独的module对象定义了rules属性,里面包含了两个必须属性:test和use。这告诉webpack编译器如下信息:
在require()/import 语句中被解析为'.txt'的路径时,在你对它进行打包之前,先使用raw-loader转换一下。
4 插件(plugins)
loader被用于转换某些类型的模块,而插件则可以用于执行范围更广的任务。插件的范围包括,从打包优化和压缩,一直到重新定义环境变量。插件接口功能及其强大,可以用来处理各种各样的任务。
想要使用一个插件,你只需要require()它,然后把他添加到plugins数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件,这是需要通过使用new操作符来创建他的一个实例。
webpack.config.js
const Htmlwebpackplugin = require('html-webpack-plugin'); const webpack = require('webpack'); const config = { module:{ rules:[ { test : /\.txt$/,use : 'raw-loader' } ] }, plugins:{ new webpack .optimize.UglifyJsPlugin(), new Htmlwebpackplugin({ template: './src/index.html' }) } } module.exports = config;
5 模式
通过选择development或production 之中的一个,来设置mode参数,你可以启用香英的模式下的webpack内置优化
module.export = { mode:'production' }
二 入口起点
1单个入口(简写)语法
用法entry:string|Array<string>
webpack.config.js
const config = { entry :'./path/to/my/entry/file.js' } module.exports = config;
entry 属性的单个入口语法,是下面的简写:
const config = { entry :{ main:'./path/to/my/entry/file.js' } };
注意:
当你向 entry
传入一个数组时会发生什么?
向 entry
属性传入「文件路径(file path)数组」将创建“多个主入口(multi-main entry)”。在你想要多个依赖文件一起注入,并且将它们的依赖导向(graph)到一个“chunk”时,传入数组的方式就很有用。
使用此语法在扩展配置时有失灵活性。
2 对象语法
用法:entry :{ [ entryChunkName:string ] : string|Array<string> }
webpack.config.js
const config = { entry :{ app :'./src/app.js', vendors:'./src/vendors.js' } }
对象语法比较繁琐,然而,这是应用程序中定义入口的最可扩展的方式。
注意:
“可扩展的 webpack 配置”是指,可重用并且可以与其他配置组合使用。这是一种流行的技术,用于将关注点(concern)从环境(environment)、构建目标(build target)、运行时(runtime)中分离。然后使用专门的工具(如 webpack-merge)将它们合并。
3 常见场景
分离应用程序app和第三方库入口
webpack.config.js
const config = { entry :{ app:'./src/app.js', vendors:'./src/wendors.js' } }
这是什么?告诉我们webpack从app.js 和vendors.js开始创建依赖图,这些依赖图是彼此完全分离,相互独立的(每一个bundle中都有一个webpack引导(bootstrap))。这种方式比较常见于,只有一个入口起点(不包含vendor)的单页应用程序中。
为什么?此设置允许你使用CommonsChunkPlugin从应用程序bundle中提取vendor引用到vendor bundle ,并且把引用vendor的部分替换为_webpack_require()调用。如果应用程序bundle中没有vendor代码,那么你可以在webpack中实现被称为长效缓存的通用模式
4 多页面应用程序
webpack.config.js
const config = { entry :{ pageone:'./src/pagone/index.js', pagetwo:'./src/pagetwo/index.js', pagetree:'./src/pagetree/index.js', } }
为什么?告诉我们webpack需要三个独立分离的依赖图
为什么?在多页面应用程序中,(每当页面跳转时)服务器将会为你重新获取一个新的html文档,页面重新加载新文档,并且资源重新下载,然而,这给了我们特殊的机会去做很多事情
使用CommonsChunkPlugin 为每个页面间的应用程序共享代码创建bundle。由于入口起点增多,多页应用能够服用入口起点之间的大量代码/模块,从而可以极大地从这些技术中受益
三 输出 output
配置output 选项可以控制webpack如何向硬盘写入编译文件。注意即使存在多个入口起点,但只指定一个输出配置。
1 用法
在webpack中配置outpack属性的最低要求是,将它的值设置为一个对象,包括一下两点:
filename:用于输出文件的文件名;
目标输出目录path的绝对路径;
webpack.config.js
const config={ output:{ filename:'bundle.js', path:'./home/proj/public/assets' } } module.export = config;
此配置将一个单独的 bundle.js
文件输出到 /home/proj/public/assets
目录中。
2 多个入口起点
如果配置创建了多个单独得chunk(例如:使用多个入口起点或者使用像CommonChunkPlugin这样得插件),则应该使用占位符来确保每个文件具有唯一得名称
{ entry: { app: './src/app.js', search: './src/search.js' }, output: { filename: '[name].js', path: __dirname + '/dist' } } // 写入到硬盘:./dist/app.js, ./dist/search.js
3 高级进阶
以下是使用 CDN 和资源 hash 的复杂示例:
config.js
output:{ path: "/home/proj/cdn/assets/[hash]", publicPath: "http://cdn.example.com/assets/[hash]/" }
在编译时不知道最终输出文件的 publicPath
的情况下,publicPath
可以留空,并且在入口起点文件运行时动态设置。如果你在编译时不知道 publicPath
,你可以先忽略它,并且在入口起点设置 __webpack_public_path__
。
__webpack_public_path__ = myRuntimePublicPath // 剩余的应用程序入口
四 模式 mode
提供mode配置选项,告知webpack使用香英模式得内置优化。
string
1 用法
只在配置中提供mode选项:
module.exports = { mode:'production' }
或者从命令中传参
wbpack --mode=production
支持一下字符串
选项 | 描述 |
development |
会将
|
production |
会将
|
mode: development
// webpack.development.config.js module.exports = { + mode: 'development' - plugins: [ - new webpack.NamedModulesPlugin(), - new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }), - ] }
mode: production
// webpack.production.config.js module.exports = { + mode: 'production', - plugins: [ - new UglifyJsPlugin(/* ... */), - new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }), - new webpack.optimize.ModuleConcatenationPlugin(), - new webpack.NoEmitOnErrorsPlugin() - ] }
五 loader
loader用于对模块得源代码进行转换。loader可以使你在import或‘加载’模块时预处理文件。因此,loader 类似于其实他构建工具中‘任务task’,并提供了处理前端构建步骤得强大方法。loader可以将文件从不同得语言(如:typeScript)转换成javascript,或将内联图像转换为data url 。loader甚至允许你直接在javascript模块中inport CSS文件!
1 示例
你可以使用 loader 告诉 webpack 加载 CSS 文件,或者将 TypeScript 转为 JavaScript。为此,首先安装相对应的 loader:
npm install --save-dev css-loader
npm install --save-dev ts-loader
然后指示 webpack 对每个 .css
使用 css-loader
,以及对所有 .ts
文件使用 ts-loader:
webpack.config.js
module.exports = { module :{ rules:[ {test:/\.css$/,use:'css-loader'}, {test:/.\ts$/,use:'ts-loader'} ] } }
2 使用 loader
在你的应用程序中,有三种使用 loader 的方式:
配置:在 webpack.config.js 文件中指定 loader。
内联:在每个 import
语句中显式指定 loader。
CLI:在 shell 命令中指定它们。
3 配置
module.rules允许你在webpack中指定多个loader。这是展示loader得一种简明方式。并且有助于使代码变得更加简洁,同时让你对各个loader有个全局得概览:
module: { rules: [ { test: /\.css$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader', options: { modules: true } } ] } ] }
4 内联
可以在import语句或者任何等效于 import 语句的方式中指定loader。使用!将资源中的loader分开,分开的每个部分都相当于当前目录解析,
import Styles from 'style-loader!css-loader?modules!./styles.css';
通过前置所有规则及使用 !。可以对应覆盖到配置中的任意loader。
选项可以传递查询参数,例如 ?key=value&foo=bar
,或者一个 JSON 对象,例如 ?{"key":"value","foo":"bar"}
。
注意 : 尽可能使用 module.rules
,因为这样可以减少源码中的代码量,并且可以在出错时,更快地调试和定位 loader 中的问题。
5 CLI
通过CLI来使用loader
webpack --module-bind jade-loader --module-bind 'css=style-loader!css-loader'
这会对 .jade文件使用 jade-loader 对.css文件使用style-loader和css-loader
6 loader特性
- loader支持链式传递,能够对资源使用流水线,一组链式得loader将按照相反得顺序执行。loader链中得第一个loader返回值给下一个loader。在最后一个webpack所逾期得javaScript。
- loader可以是同步得也可以是异步的。
- loader运行在Node.js中,并且能够执行任何可能操作。
- loader接收查询参数。用于对loader传递配置。
- loader也能够使用option对象进行配置。
- 除了使用package.js常见得main属性。还可以将普通得npm模块导出为loader,做法实在package.js里定义一个loader字段。
- 插件(plugin)可以为loader带来更多特性
- loader能够产生额外得任意文件。
loader 通过(loader)预处理函数,为 JavaScript 生态系统提供了更多能力。 用户现在可以更加灵活地引入细粒度逻辑,例如压缩、打包、语言翻译和其他更多。
7 解析loader
loader 遵循标准的模块解析。多数情况下,loader 将从模块路径(通常将模块路径认为是 npm install
, node_modules
)解析。
loader 模块需要导出为一个函数,并且使用 Node.js 兼容的 JavaScript 编写。通常使用 npm 进行管理,但是也可以将自定义 loader 作为应用程序中的文件。按照约定,loader 通常被命名为 xxx-loader
(例如 json-loader
)
六 插件 plugin
插件得目的用于解决loader无法实现得其他事.
1 剖析
webpack插件是一个具有apply属性得JavaScript对象。apply属性会被webpack compiler 调用,并且comipler对象可以在整个编译生命周期访问。
ConsoleLogOnBuildWebpackPlugin.js
const pluginName = 'ConsoleLogOnBuildWebpackPlugin'; class ConsoleLogOnBuildWebpackPlugin { apply(compiler){ compiler.hook.run.tap(pulginName,compilation =>{ console.log("webpack 构建过程开始!"); }) } }
注意:compiler hook 的 tap 方法的第一个参数,应该是驼峰式命名的插件名称。建议为此使用一个常量,以便它可以在所有 hook 中复用。
2 用法
由于插件可以携带参数/选项,你必须在 webpack 配置中,向 plugins
属性传入 new
实例。
3 配置
webpack.config.js
const config = { entry :'./path/to/my/entry/first.js', output:{ filename:'my-first-webpack.bundle.js', path:path.resolve(_dirname,'dist'), }, module:{ rules:[ { test:/.\(js|jsx)$/, use:'babel-loader' } ] }, plugins:[ new webpack.optimize.UglifyJsPlugin(), new HtmlWebpackPlugin({template:'./src/index.js'}) ] }; module.exports = config;
4 Node API
注意:即便使用 Node API,用户也应该在配置中传入 plugins
属性。compiler.apply
并不是推荐的使用方式。
const webpack = require('webpack'); //访问 webpack 运行时(runtime) const configuration = require('./webpack.config.js'); let compiler = webpack(configuration); compiler.apply(new webpack.ProgressPlugin()); compiler.run(function(err, stats) { // ... });
七 配置
webpack 的配置文件,是导出一个对象的 JavaScript 文件。此对象,由 webpack 根据对象定义的属性进行解析。
因为 webpack 配置是标准的 Node.js CommonJS 模块,你可以做到以下事情:
- 通过
require(...)
导入其他文件 - 通过
require(...)
使用 npm 的工具函数 - 使用 JavaScript 控制流表达式,例如
?:
操作符 - 对常用值使用常量或变量
- 编写并执行函数来生成部分配置
请在合适的时机使用这些特性。
虽然技术上可行,但应避免以下做法:
- 在使用 webpack 命令行接口(CLI)(应该编写自己的命令行接口(CLI),或使用
--env
)时,访问命令行接口(CLI)参数 - 导出不确定的值(调用 webpack 两次应该产生同样的输出文件)
- 编写很长的配置(应该将配置拆分为多个文件)
1 基本配置
webpack.config.js
var path = require('path'); module.exports = { mode: 'development', entry: './foo.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'foo.bundle.js' } };
八 模块
1 什么是webpack模块?
对比node.js模块,webpack 模块 能够以各种方式表达它们得依赖关系,如下几个例子:
- ES2015 import 语句
- CommonJS
require()
语句。 - AMD
define
和require
语句。 - css/sass/less 文件中的 @import语句。
- 样式(
url(...)
)或 HTML 文件(<img src=...>
)中的图片链接(image url)。
2 支持模块类型
webpack 通过 loader 可以支持各种语言和预处理器编写模块。loader 描述了 webpack 如何处理 非 JavaScript(non-JavaScript) _模块_,并且在bundle中引入这些_依赖_。 webpack 社区已经为各种流行语言和语言处理器构建了 loader,包括:
- CoffeeScript
- TypeScript
- ESNext (Babel)
- Sass
- Less
- Stylus
九 模块解析
resolver是一个库,用于帮助找到模块得绝对路径。帮助webpack找到bundle中需要引入得模块代码,这些代码在包含在每个require/import语句中。当打包模块时,webpack使用enhanced-resolve来解析文件路径。
1 webpack中的解析规则
使用enhanced-resolve可以解析三种文件路径:
2 绝对路径
不需要做进一步解析
import "/home/me/file";
import "C:\\User\\me\\file";
3 相对路径
import "../src/file1";
import "./file2"
在这种情况下,使用 import
或 require
的资源文件(resource file)所在的目录被认为是上下文目录(context directory)。在 import/require
中给定的相对路径,会添加此上下文路径(context path),以产生模块的绝对路径(absolute path)。
4 模块路径
import "module";
import "module/lib/file";
模块将会在resolve.modules中指定的所有目录内搜索,你可以替换初始模块路径,次替换路径通过使用resolve.alias配置一个别名。
一旦根据上述规则解析路径后,解析器将检查路径是否指向文件或目录。如果只想一个文件:
- 如果路径具有文件扩展名,则直接将文件打包;
- 否则,将使用(resolve.extensions)选项作为文件扩展名来解析,此选项告诉解析器在解析中能够接受那些扩展名(例如:js ,jsx)
如果路径指向一个文件夹,则采取一下步骤找到具有正确扩展名的正确文件:
- 如果文件夹中包含package.json文件,则按照顺序查找resolve.mainFields 配置选项中指定的字段,并且package.json中的第一个这样的字段确定文件路径。
- 如果package.json文件不存在或者package.json文件中的main字段没有返回一个有效路径,则按照顺序查找resolve.mainFields配置选项中指定的文件名,看是否能在import/require目录下匹配到一个存在的文件名。
- 文件扩展名通过resolve.estensions 选项采用类似的方法进行解析
webpack根据构建目标为这些选项采用合理的默认配置。
5 解析loader 【Resolving Loaders】
Loader解析遵循与文件解析器指定的规则相同的规则。但是resolveLoader 配置选项可以用来为Loader提供独立解析规则。
6 缓存
每个文件系统访问都被缓存,以便更快触发对同一文件的多个并行或串行请求。在观察模式下,只有修改过的文件会从缓存中摘出。如果关闭观察模式,在每次编译前清理缓存。
十 依赖图 【dependency graph】
任何时候,一个文件依赖于另一个文件,webpack 就把此视为文件之间有依赖关系。这使得 webpack 可以接收非代码资源(non-code asset)(例如图像或 web 字体),并且可以把它们作为_依赖_提供给你的应用程序。
webpack 从命令行或配置文件中定义的一个模块列表开始,处理你的应用程序。 从这些入口起点开始,webpack 递归地构建一个依赖图,这个依赖图包含着应用程序所需的每个模块,然后将所有这些模块打包为少量的 bundle- 通常只有一个 - 可由浏览器加载。
十一 构建目标
1 用法
在webpack配置中设置target的值
webpack.config.js
module.exports={ target:'node' }
在上面例子中,使用node webpack 会编译为用于[类似Node.js]环境(使用Node.js的require,而不是使用任意的内置模块(如 fs或path)来加载chunk)。
每个target 都有各种部署/环境特定的附加项,以支持满足其需求。
2 多个target
webpack不支持向传入多个字符串,你可以通过打包两份分离配置来创建同构的库:
webpack.config.js
var path = require('path'); var serverConfig = { target: 'node', output:{ path:path.rsolve(_dirname,dist); fileName:'lib.nade.js' } …… }; var clientConfig = { target:'web', // 默认值是 ‘web’ ,可省略 output:{ path:path.resolve(_dirname,'dist'), filename:'lib.js' } …… }; module.exports=[serverConfig ,clientConfig ];
上面的例子将在你的 dist
文件夹下创建 lib.js
和 lib.node.js
文件。
十二 模块热替换
模块热替换功能会在应用程序过程中替换,添加或删除模块,而无需重新加载整个页面。主要是通过以下几种方式,来显著加快开发速度。
- 保留在完全重新加载页面时丢失应用程序状态;
- 只更新变更内容,以节省宝贵的开发时间
- 调整央视更加快捷,几乎相当于在浏览器调试其中更改样式