webpack的四个核心概念
- 入口(entry)
- 输出(output)
- loader
- 插件(plugins)
入口(entry)
入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。可以通过在 webpack 配置中配置 entry 属性,来指定一个入口起点(或多个入口起点)。默认值为 ./src。
输出(output)
output 属性告诉 webpack 在哪里输出它所创建的 bundles,以及如何命名这些文件,默认值为 ./dist。
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'
}
};
loader
loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块。
webpack 的配置中 loader 有两个目标:
- test 属性,用于标识出应该被对应的 loader 进行转 换的某个或某些文件。
- use 属性,表示进行转换时,应该使用哪个 loader。
const path = require('path');
const config = {
output: {
filename: 'my-first-webpack.bundle.js'
},
module: {
rules: [
{ test: /\.txt$/, use: 'raw-loader' }
]
}
};
module.exports = config;
插件(plugins)
loader 被用于转换某些类型的模块,而插件则可以用于执行范围更广的任务,为webpack增添处理打包之外的其他的一些功能。
常用配置项
// webpack.config.js
const path=require('path')
module.exports={
// "production" | "development" | "none"
mode:"production",
// 通过在浏览器调试工具(browser devtools)中添加元信息(meta info)增强调试
devtool: "source-map",
entry: {
main: "./app/entry-a"
},
devServer:{
// 热更新
hot:true,
//默认是 localhost 如果希望服务器外部可访问
host:'0,0,0,0'
},
// webpack 输出结果的相关选项配置
output: {
// 所有输出文件的目标路径 必须是绝对路径(使用 Node.js 的 path 模块)
path: path.resolve(__dirname, "dist"),
// 用于多个入口点(entry point)(出口点?)
filename: "[name].js",
// 导出库(exported library)的类型 默认值var
libraryTarget: "umd",
},
module:{
rule:[
{
test: /\.jsx?$/,
include: [
path.resolve(__dirname, "app")
],
exclude: [
path.resolve(__dirname, "app/demo-files")
],
// 这里是匹配条件,每个选项都接收一个正则表达式或字符串
// test 和 include 具有相同的作用,都是必须匹配选项
// exclude 是必不匹配选项(优先于 test 和 include)
// 最佳实践:
// - 只在 test 和 文件名匹配 中使用正则表达式
// - 在 include 和 exclude 中使用绝对路径数组
// - 尽量避免 exclude,更倾向于使用 include
loader: "babel-loader",
},
{
test: /\.html$/,
use: [
// 应用多个 loader 和选项
"htmllint-loader",
{
loader: "html-loader",
options: {
/* ... */
}
}
]
},
]
}
}