Webpack基础教程之名词解释
一、概念介绍
本质上，webpack是一个现代JavaScript应用程序的静态模块打包器(modulebundler)。当webpack处理应用程序时，它会递归地构建一个依赖关系图(dependencygraph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。
它是高度可配置的，但是，在开始前你需要先理解四个核心概念：
入口(entry)
输出(output)
loader
插件(plugins)
1、入口(entry)
指定webpack从哪个模块开始构建项目，通过一下配置指定一个入口起点(或多个入口起点)，被处理到称之为bundles的文件中：
//webpack.config.js
module.exports={
entry:'./path/to/my/entry/file.js'
}
2、出口(output)
处理打包生成的bundles文件，如指定输出文件位置，文件名等。
//webpack.config.js
module.exports={
entry:'./path/to/my/entry/file.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'test_name.bunlde.js'
}
}
3、loader
loader作用是将所有文件类型转换成webpack能处理的有效模块，然后就可以通过webpack将文件打包。
本质上，webpackloader将所有类型文件转换成应用程序的依赖图可以直接引用的模块。
特殊:只有webpack支持import导入任何类型模块，如.css,.vue等文件。
webpack配置loader的两个目标：
1.识别需要对应loader处理的文件。(使用test属性)
2.转换文件使其能够添加到依赖图并最终添加到bunlde中。(使用use属性)
//webpack.config.js
constpath=require('path');
constconfig={
entry:'./path/to/my/entry/file.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'my-first-webpack.bundle.js'
},
module:{
rules:[
{test:/\.txt$/,use:'raw-loader'}
//test/use两个属性是必须的
]
}
}
module.exports=config;
4、插件(plugins)
使用插件可以执行范围更广的任务。通过require()引用后添加在plugins数组中。
另外如果需要多次使用同一个插件，则使用new操作符来创建它的一个实例。
安装html-webpack-plugin：
npminstallhtml-webpack-plugin--save-dev
//webpack.config.js
constHtmlWebpackPlugin=require('html-webpack-plugin');
constwebpack=require('webpack');//用于访问内置插件
constpath=require('path');
constconfig={
entry:'./path/to/my/entry/file.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'my-first-webpack.bundle.js'
},
module:{
rules:[
{test:/\.txt$/,use:'raw-loader'}
]
},
plugins:[
newwebpack.optimize.UglifyJsPlugin(),
newHtmlWebpackPlugin({template:'./src/index.html'})
]
};
module.exports=config;
二、入口起点(EntryPoints)
webpack的entry属性不仅可以配置单个入口，还可以配置多个入口：
1、单个入口(简写)配置
用法：entry:string|Array
简单使用：
constconfig={
entry:'./path/to/my/entry/file.js'
};
module.exports=config;
entry属性的单个入口配置方式：
constconfig={
entry:{
main:'./path/to/my/entry/file.js'
}
}
若向entry传入[文件路径(filepath)数组]，将创建多个主入口，常常用在需要同时注入多个文件，并将它们的依赖导向(graph)到一个chunk时。
2、多个入口(简写)配置
对象语法
用法：entry:{[entryChunkName:string]:string|Array
//webpack.config.js
webpack.config.js
constconfig={
entry:{
app:'./src/app.js',
vendors:'./src/vendors.js'
}
};
虽然语法繁琐，但这是应用程序中定义入口的最可扩展的方式。
“可扩展的webpack配置”是指，可重用并且可以与其他配置组合使用。这是一种流行的技术，用于将关注点(concern)从环境(environment)、构建目标(buildtarget)、运行时(runtime)中分离。然后使用专门的工具（如webpack-merge）将它们合并。
常见场景
列出一些常见的入口配置和实际案例：
(1)分离应用程序(app)和第三方库(vendor)入口
//webpack.config.js
constconfig={
entry:{
app:'./src/app.js',
vendors:'./src/vendors.js'
}
};
webpack从app.js和vendors.js开始构建，并且他们是完全分离互相独立，为了支持提供更佳vendor分离能力的DllPlugin，考虑移除该场景。
(2)多页面应用程序
//webpack.config.js
constconfig={
entry:{
pageOne:'./src/pageOne/index.js',
pageTwo:'./src/pageTwo/index.js',
pageThree:'./src/pageThree/index.js'
}
};
这样告诉webpack需要3个独立分离的依赖图，
使用CommonsChunkPlugin为每个页面间的应用程序共享代码创建bundle。
由于入口起点增多，多页应用能够复用入口起点之间的大量代码/模块，从而可以极大地从这些技术中受益。
更多关于Webpack基础教程请点击下面的相关文章
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。