1、entry(入口)
指示Webpack从哪个文件开始打包
module.exports = {
entry: "./src/main.js",//相对路径或者绝对路径
output: {},
module: {},
plugins: [],
mode: "development",
};
2、output(输出)
指示Webpack打包完的文件输出到哪里去,如何命名
const path = require("path");//node的核心模块
module.exports = {
entry: "./src/main.js",
output: {
path: path.resolve(__dirname, "dist"),//当前目录,使用绝对路径
filename: "main.js",
},
module: {},
plugins: [],
mode: "development",
};
3、loader(加载器)
Webpack本身只能处理JS、JSON等资源,其他资源需要借助loader,Webpack才能解析
const path = require("path");
module.exports = {
entry: "./src/main.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "main.js",
},
module: {
rules: [
{
// 用来匹配 .css 结尾的文件
test: /\.css$/,
// use 数组里面 Loader 执行顺序是从右到左
use: ["style-loader", "css-loader"],
},
],
},
plugins: [],
mode: "development",
};
4、plugins(插件)
扩展Webpack的功能
const path = require("path");
module.exports = {
entry: "./src/main.js",
output: {
path: path.resolve(__dirname, "dist"),
filename: "main.js",
},
module: {
rules: [
{
// 用来匹配 .css 结尾的文件
test: /\.css$/,
// use 数组里面 Loader 执行顺序是从右到左
use: ["style-loader", "css-loader"],
},
],
},
plugins: [
new ESLintWebpackPlugin({
// 指定检查文件的根目录
context: path.resolve(__dirname, "src"),
}),
],
mode: "development",
};
5、mode(模式)
主要有两种模式:
开发模式(development):编译代码,使浏览器能够识别运行,代码质量检查,让代码更加健壮。
生产模式(production):优化代码运行性能,优化代码打包速度