당신이 사용할 수 있는 내보내는 여러 구성. 을 만들이 여러 웹팩 구성하여 빌드를 다른 모듈을 사용합니다. 그래서 지정 publicPath 각 구성 마법사를 제공합니다.
폴더 구조
⚡ tree -L 4 -I 'node_modules'
.
├── dist
│ ├── staff.css
│ ├── staff.html
│ ├── staff.js
│ ├── student.html
│ ├── students.css
│ └── students.js
├── package-lock.json
├── package.json
├── staff
│ ├── css
│ │ └── index.css
│ ├── js
│ │ └── index.js
│ └── templates
│ └── index.html
├── students
│ ├── css
│ │ └── index.css
│ ├── js
│ │ └── index.js
│ └── templates
│ └── index.html
└── webpack.config.js
9 directories, 15 files
E.g.
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require("path");
module.exports = [
{
mode: "development",
entry: {
students: "./students/js/index.js",
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].js",
publicPath: "/students/",
},
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
],
},
plugins: [
new HtmlWebpackPlugin({
filename: "student.html",
template: "./students/templates/index.html",
chunks: ["students"],
}),
new MiniCssExtractPlugin(),
],
},
{
mode: "development",
entry: {
staff: "./staff/js/index.js",
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "[name].js",
publicPath: "/",
},
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, "css-loader"],
},
],
},
plugins: [
new HtmlWebpackPlugin({
filename: "staff.html",
template: "./staff/templates/index.html",
chunks: ["staff"],
}),
new MiniCssExtractPlugin(),
],
},
];
출력:
dist/staff.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script defer src="/staff.js"></script><link href="/staff.css" rel="stylesheet"></head>
<body>
</body>
</html>
dist/students.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script defer src="/students/students.js"></script><link href="/students/students.css" rel="stylesheet"></head>
<body>
</body>
</html>
