-
Notifications
You must be signed in to change notification settings - Fork 0
/
webpack.config.js
125 lines (113 loc) · 4.11 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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyPlugin = require("copy-webpack-plugin");
module.exports = (env, argv) => {
// 開発モードかどうか
// モード(none / production / development)
const IS_DEVELOPMENT = argv.mode === 'development';
const configs = {
mode: argv.mode,
// 開発パス
entry: {
'index': path.resolve(__dirname, "src/js/index.js"),
'style.css': path.resolve(__dirname, 'src/scss/style.scss')
},
// 出力パス
output: {
filename: 'js/[name].js',
path: path.resolve(__dirname, 'dist'),
},
plugins: [
// 出力先のフォルダを一旦空に
new CleanWebpackPlugin({
// 対象ファイル指定
cleanOnceBeforeBuildPatterns: [ // 複数ある場合は配列で指定
// '**/*', // 出力フォルダ(output: で指定したパス)内のすべてのファイル
'css/*',
'js/*',
'img/*',
],
}),
new RemoveEmptyScriptsPlugin(), // CSS別出力時の不要JSファイルを削除
new MiniCssExtractPlugin({ // CSSの出力先
filename: 'css/[name]'// 出力ファイル名を相対パスで指定([name]にはentry:で指定したキーが入る)
}),
new CopyPlugin({
patterns: [
{
from: path.resolve(__dirname, 'src/img'),
to: path.resolve(__dirname, 'dist/img'),
}
],
}),
],
module: {
rules: [
// JS
{
test: /\.js$/,
use: [
{
loader: "babel-loader",
options: {
presets: [
// ES5 に変換
"@babel/preset-env"
]
}
}
]
},
{
test: /\.(scss|css|sass)$/,
use: [
MiniCssExtractPlugin.loader, // JSとCSSを別々に出力する
{
loader: "css-loader",
options: { url: false }
},
'postcss-loader', // オプションはpostcss.config.jsで指定
'sass-loader',
],
},
// {
// test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
// type: 'asset/resource',
// generator: {
// filename: 'plugin_fonts/[name][ext]'
// }
// },
// {
// test: /\.(jpg|png|gif|svg)$/,
// type: 'asset/resource',
// generator: {
// filename: 'plugin_images/[name][ext]'
// }
// }
],
},
// node_modules を監視(watch)対象から除外
watchOptions: {
followSymlinks: true,
ignored: /node_modules/,
poll: 1000, //毎秒変更を確認します
},
devServer: {
static: {
directory: path.join(__dirname, 'dist'),
},
watchFiles: [
'src/**/*.js',
'src/**/*.scss',
'public/**/*'
],
},
}
if (IS_DEVELOPMENT) {
// development であれば、devtool を追加
configs.devtool = 'cheap-module-source-map';
}
return configs;
};