1.作用
- webpack 是一个静态模块打包器(module bundler)。它会递归地构建一个依赖关系图(dependency graph)， 其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle
- 打包：可以把多个Javascript文件打包成一个文件，减少服务器压力和下载带宽。
- 转换：把拓展语言(SCSS/ES6)转换成为普通的JavaScript，让浏览器顺利运行。
- 优化：WebPack具有优化和提升性能的责任。
2.核心概念
- entry：webpack.config.js中配置entry属性定义入口，入口获取依赖模块
- output：webpack.config.js中配置output属性定义输出所创建的bundles
- loader：webpack.config.js中配置module.rules属性中的目标，将非JavaScript文件转化为能够处理的有效模块并进行打包处理
- test：标识应该转换的文件
- use：标识使用的loader
- plugins：
- mode：通过选择development或production之中的一个，来设置mode参数启用相应模式下的 webpack 内置的优化
3.入口起点
- 单入口：entry: string|Array，若是数组则多个依赖注入到一个chunk中
- 多入口：entry: {[entryChunkName: string]: string|Array}
4.输出
- 存在多个入口起点，但只指定一个输出配置
- 最低要求：配置成一个对象
- 多个入口起点：使用占位符确保每个文件具有唯一名称filename: ‘[name].js’
- 高级进阶：
- 使用CDN：定义publicPath属性设置CDN地址
- 资源hash：路径末尾写入[hash]
5.loader
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
include: [resolve('src')],
use: 'Happypack/loader?id=js'
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
esModule: false,
limit: 10000,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
}
]
}
- 使用loader的三种方式
- loader特性
- loader 支持链式传递。能够对资源使用流水线(pipeline)。一组链式的 loader 将按照相反的顺序执行。loader 链中的第一个 loader 返回值给下一个 loader。在最后一个 loader，返回 webpack 所预期的 JavaScript。
- loader 可以是同步的，也可以是异步的。
- loader 运行在 Node.js 中，并且能够执行任何可能的操作。
- loader 接收查询参数。用于对 loader 传递配置。
- loader 也能够使用 options 对象进行配置。
- 除了使用 package.json 常见的 main 属性，还可以将普通的 npm 模块导出为 loader，做法是在 package.json 里定义一个 loader 字段。
- 插件(plugin)可以为 loader 带来更多特性。
- loader 能够产生额外的任意文件。
- 典型loader
6.插件
plugins: [
new HtmlWebpackPlugin({
excludeChunks: ['ui-preview'],
template: './src/main/index.ejs',
filename: './index.html',
favicon: './public/favicon/favicon.ico',
title: version.CONfig_VERSION_NAME,
inject: false,
hash: true,
mode: devMode //是否是调试模式 'development'
})
]
- 插件HtmlWebpackPlugin：生成新的index.html，内部引入全部生成的bundle文件，将新生成的index.html替换旧的index.html
- 插件CleanWebpackPlugin：构建前清空dist文件夹中内容，仅存在新构建的文件
7.模块解析
resolve: {
extensions: ['.js', '.json', '.vue'],
modules: [
resolve('src'),
resolve('node_modules')
],
alias: {
'@': path.resolve(__dirname, "../src"),
}
}
- 三种文件路径解析
- extensions：路径指向文件不具备扩展名时作为文件扩展名
- modules：模块路径解析中在指定目录中查找模块路径
- alias：module设置别名，根据别名路径查找模块
- 路径指向文件夹，采取以下步骤找到正确文件：
- Loader解析遵循与文件解析器指定的规则相同的规则。但是resolveLoader配置选项可以用来为Loader提供独立的解析规则
8.manifest
- runtime ：在模块交互时，连接模块所需的加载和解析逻辑。包括浏览器中的已加载模块的连接，以及懒加载模块的执行逻辑。
- Manifest：当编译器(compiler)开始执行、解析和映射应用程序时，它会保留所有模块的详细要点形成的数据结构
- 通过使用 manifest 中的数据，runtime 将能够查询模块标识符，检索出背后对应的模块
9.模块热替换
- 作用：HMR会在应用程序运行过程中替换、添加或删除模块，而无需重新加载整个页面
- 支持：不同文件的loader内置支持HMR
- 方式：保留在完全重新加载页面时丢失的应用程序状态，只更新变更内容
- 步骤：
- 编译器update：
- 更新后的 manifest(JSON)
- 一个或多个更新后的 chunk (JavaScript)
- HMR：
- 启用HMR：
- 配置devServer：
+ hot: true - 配置plugins：
+ new webpack.HotModuleReplacementPlugin() - 修改index.html：
+ if (module.hot) { module.hot.accept('', function() {} ) }
- 配置devServer：
- 通过Node.js API：
const webpackDevServer = require('webpack-dev-server');
const webpack = require('webpack');
const config = require('./webpack.config.js');
const options = {
contentBase: './dist',
hot: true,
host: 'localhost'
};
webpackDevServer.addDevServerEntrypoints(config, options);
const compiler = webpack(config);
const server = new webpackDevServer(compiler, options);
server.listen(5000, 'localhost', () => {
console.log('dev server listening on port 5000');
});
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
