一、webpack四个核心概念
1、入口【Entry】
webpack将创建所有应用程序 依赖关系图表。图表的起点被称之为 入口起点。入口起点告诉webpack从哪里开始,并遵循着依赖关系图表知道打包什么。可以将您的应用入口起点认为是跟上下文或app的第一个启动文件。
const config = {
entry: {
app: ‘./src/app.js‘
}
}
module.exports = config;
2、出口【Output】
将所有资源打包在一起,仍然告诉webpack在哪里打包我们的应用,即将打包资源输出到什么地方。
const config = {
entry: {
app: ‘./src/app.js‘
},
output: {
filename: ‘webpack.bundle.js‘,
path: ‘./dist‘
}
}
module.exports = config;
3、加载器【Loader】
webpack的目标是,让项目中的所有资源都成为webpack的关注点,而浏览器不需要考虑这些(这并不意味着资源都必须打包在一起)。webpack把每个文件(.css, .html, .scss, .jpg, .etc)都作为模块处理。然而webpack只了解JavaScript,所有需要加载器来处理其它类型的文件。
因为文件已被添加到了依赖图表,所有webpack加载器会将这些文件转换为模块。
loader属性要实现的两个目标:
(1)识别出应该被特定的加载器转换的文件;
(2)转换能够被添加到依赖图表的文件(并且最终打包)
const config = {
entry: {
app: ‘./src/app.js‘
},
output: {
filename: ‘webpack.bundle.js‘,
path: ‘./dist‘
},
module: {
loaders: [
{
test: /\.(js|jsx)$/,
loader: ‘babel-loader‘
},
{
test: /\.css$/,
loaders: [‘style‘, ‘css‘]
}
]
}
}
module.exports = config;
loader的两个必选属性test和loader告诉了webpack如下行为:webpack编译器,当你碰到在require()/import
语句中被解析为.js
或.jsx
的路径时,在你把它们添加并打包之前,要先使用babel-loader去转换。同理,css也是这个样子,只不过使用的loader模块不同。
4、插件【Plugins]
加载器仅基于单个文件执行转换,插件最常用于(但不限于)在打包模块的“编译”和“组块”时执行操作和自定义功能。webpack的插件系统极其强大和可定制。
为了使用插件,需要require它们,并且把它们添加到plugins数组。多数插件可以通过potion来自定义。由于你可以在一个配置多次使用插件用于不同的目的,因此你需要使用new来创建插件的实例,并且调用插件。
const HtmlWebpackPlugin = require(‘html-webpack-plugin‘);
const htmlWP = new HtmlWebpackPlugin({template: ‘./src/index.html‘});
const config = {
entry: {
app: ‘./src/app.js‘
},
output: {
filename: ‘webpack.bundle.js‘,
path: ‘./dist‘
},
module: {
loaders: [
{
test: /\.(js|jsx)$/,
loader: ‘babel-loader‘
},
{
test: /\.css$/,
loaders: [‘style‘, ‘css‘]
}
]
},
plugins: [
htmlWP
]
}
module.exports = config;
二、webpack解析三种文件路径
(1)绝对路径
(2)相对路径
(3)模块路径