概念
Entry 入口
webpack建立了应用的依赖图,这个图的开始节点就叫做入口节点。入口节点告诉webpack从哪里开始处理依赖图。你可以将入口节点理解为上下文的根目录,或者你的应用的第一个文件。
在webpack 中,利用webpack的configuration对象中的entry属性来定义入口节点。最简单的例子如下:
module.exports = {
entry: './path/to/my/entry/file.js'
};
根据你的应用的需要,有许多方式定义你的entry属性。
output出口
当把应用程序需要的资源聚集到一起后,output属性告诉webpack如何处理这些收集起来的代码,
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属性有很多可配置的属性。
Loaders
webpack将所有的文件都视为模块,然而,webpack自身只理解js。loaders负责将这些文件转化成模块并加入依赖图。
loaders在webpack的config中,有2个目的
1.鉴定哪些文件应该被特定loader转换
2.转换这些需要转换的文件。
webpack.config.js
const path = require('path');
const config = {
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' }
]
}
};
module.exports = config;
以上配置定义了针对单一模块的rules属性,用了2个必需的属性,test和use。它们告诉webpack编译器如下信息:
hi webpack,当你在require或者import表述中遇到以.txt为后缀的文件时,你用raw-loader转换它,然后再加入集合代码库。
Plugins
Loaders只能检测到单个文件的变化,插件通常针对捆绑模块,webpack的插件系统是非常强大的,可定制的。
为了使用插件,你需要使用require()方法将插件引入,然后将其添加到插件数组中,大多数的插件通过options选项是可以配置的。由于你可以将一个插件用于不同的用途,所以,你需要将插件实例化。
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
const path = require('path');
const config = {
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: [
new webpack.optimize.UglifyJsPlugin(),
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
module.exports = config;
webpack提供了很多插件,将在下面的章节详细阐述。