This repository has been archived by the owner on May 1, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
webpack.common.js
90 lines (87 loc) · 2.53 KB
/
webpack.common.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
const webpack = require("webpack");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader");
const getEntries = require("./config/webpack/utils/getEntries");
const buildHtmlWebpackPlugins = require("./config/webpack/utils/buildHtmlWebpackPlugins.js");
const JAVASCRIPT_ENTRY_PATH = "./src/javascripts/entries/";
const HTML_TEMPLATE_PATH = "./src/pages/";
const entries = getEntries(JAVASCRIPT_ENTRY_PATH);
module.exports = {
// jsのエントリーポイント
// デフォルトはsrc/index.js
// ここではJAVASCRIPT_ENTRY_PATH配下のjs/tsをentryとするようにしている
entry: entries,
// 出力設定
// デフォルトはdist/main.js
output: {
// 出力先のディレクトリ
path: `${__dirname}/dist`,
// 出力先のファイル
filename: "[name]-[contenthash].js",
},
module: {
rules: [
// stylesheetのbuild用の設定
{
test: /\.(scss|css)$/,
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
},
{
test: /\.(js|ts)$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: "babel-loader",
},
},
{
test: /\.ts$/,
exclude: /(node_modules|bower_components)/,
loader: "ts-loader",
options: {
// /vueをtypescriptとして扱う
appendTsSuffixTo: [/\.vue/],
transpileOnly: true,
},
},
{
test: /\.vue$/,
loader: "vue-loader",
options: {
loaders: {
scss: "vue-style-loader!css-loader!sass-loader",
},
},
},
{
test: /\.html$/,
use: ["html-loader"],
},
{
test: /\.(png|jpe?g|gif)$/i,
type: "asset/resource",
},
],
},
resolve: {
alias: {
vue: "vue/dist/vue.esm-bundler.js",
"@js": `${__dirname}/src/javascripts`,
"@css": `${__dirname}/src/styles`,
},
extensions: [".ts", ".js"],
},
plugins: [
// 個別のbuild後のjsを読み込むHTMLを生成
...buildHtmlWebpackPlugins(entries, HTML_TEMPLATE_PATH),
// CSSを別ファイルでbuildする
new MiniCssExtractPlugin({ filename: "[name]-[contenthash].css" }),
// build後に古いファイルを消す
new CleanWebpackPlugin(),
new VueLoaderPlugin(),
new webpack.DefinePlugin({
__VUE_OPTIONS_API__: true,
__VUE_PROD_DEVTOOLS__: false,
}),
],
};