-
Notifications
You must be signed in to change notification settings - Fork 0
/
webpack.config.js
62 lines (60 loc) · 2.69 KB
/
webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
// webpack.config.js
const path = require("path"); // подключаем path к конфигу вебпак
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: { main: "./src/index.js" }, // указали первое место, куда заглянет webpack, — файл index.js в папке src
output: {
path: path.resolve(__dirname, "dist"),
filename: "main.js",
publicPath: "",
}, // указали в какой файл будет собираться весь js и дали ему имя
mode: "development", // добавили режим разработчика
devServer: {
static: path.resolve(__dirname, "./dist"), // путь, куда "смотрит" режим разработчика
compress: true, // это ускорит загрузку в режиме разработки
port: 8080, // порт, чтобы открывать сайт по адресу localhost:8080, но можно поменять порт
open: true, // сайт будет открываться сам при запуске npm run dev
},
module: {
rules: [
// rules — это массив правил
// добавим в него объект правил для бабеля
{
// регулярное выражение, которое ищет все js файлы
test: /\.js$/,
// при обработке этих файлов нужно использовать babel-loader
use: "babel-loader",
// исключает папку node_modules, файлы в ней обрабатывать не нужно
exclude: "/node_modules/",
},
{
// регулярное выражение, которое ищет все файлы с такими расширениями
test: /\.(png|svg|jpg|gif|woff(2)?|eot|ttf|otf)$/,
type: "asset/resource",
},
{
// применять это правило только к CSS-файлам
test: /\.css$/,
// при обработке этих файлов нужно использовать
// MiniCssExtractPlugin.loader и css-loader
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: { importLoaders: 1 },
},
"postcss-loader",
],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: "./src/index.html", // путь к файлу index.html
}),
new CleanWebpackPlugin(),
new MiniCssExtractPlugin(),
],
};