一、入口entry
1、entry用于指定webpack打包的入口文件,可以是单个入口、多个入口甚至动态入口
2、单个入口:使用字符串作为单个入口
module.exports = {
entry: './src/index.js'
}
3、多个入口:使用对象指定多个入口
module.exports = {
entry: {
app: './src/app.js',
vendor: './src/vendor.js'
}
}
4、动态入口:使用函数返回值作为入口
module.exports = {
entry: () => new Promise(resolve => {
resolve('./src/index.js')
})
}
二、输出output
1、output用于指定webpack打包后的输出文件的路径和名称,可以是单个输出、多个输出
2、单个输出:使用字符串指定单个输出文件
module.exports = {
output: {
filename: 'bundle.js',
path: __dirname + '/dist'
}
}
3、多个输出:使用占位符指定多个输出文件名称
module.exports = {
output: {
filename: '[name].bundle.js',
path: __dirname + '/dist'
}
}
三、loader
1、loader用于对模块的源代码进行转换,支持链式调用
2、使用方式:在module.rules中进行配置
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: ['babel-loader']
}
]
}
}
3、在上面的配置中,对于所有以.js结尾的文件,使用babel-loader进行转换
四、plugins
1、plugins是一个用于执行范围更广的任务的插件集
2、使用方法:在plugins中进行配置
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'My App'
})
]
}
3、在上面的配置中,CleanWebpackPlugin用于清空输出目录,HtmlWebpackPlugin用于生成HTML文件
五、mode
1、mode用于指定当前构建模式,支持development、production和none三种
2、使用方法:在mode中进行配置
module.exports = {
mode: 'production'
}
六、resolve
1、resolve用于设置模块解析的相关配置,如模块搜索目录、别名等
2、使用方法:在resolve中进行配置
module.exports = {
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
}
}
}
3、在上面的配置中,通过alias设置了一个别名@,指向src目录