const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
const { VueLoaderPlugin } = require('vue-loader/lib/plugin-webpack5');
/* ----- パス設定 ----- */
const path = require('path');
const dir = {
src: path.join(__dirname, 'src'),
dist: path.join(__dirname, 'dist'),
};
/* ----- js rules ----- */
const jsRules = {
// *----- js | lint -----*
jsLint: {
test: /\.(ts|js|vue)$/,
exclude: /node_modules/,
// ビルド前に構文チェック
enforce: 'pre',
loader: 'eslint-loader',
options: {
// 構文エラーがあった場合はfixする
fix: true,
},
},
// *----- js | compile -----*
jsCompile: {
test: /\.(ts|js|vue)$/,
exclude: /node_modules/,
loader: 'babel-loader',
},
};
/* ----- css rules ----- */
const cssRules = {
// *----- css, scss, sass | compile -----*
test: /\.(scss|sass|css)$/,
exclude: /node_modules/,
use: [
MiniCssExtractPlugin.loader,
'vue-style-loader',
{
// css を js にバンドル
loader: 'css-loader',
options: {
// オプションでCSS内のurl()メソッドの取り込みを禁止する
url: false,
// 0 => no loaders (default);
// 1 => postcss-loader;
// 2 => postcss-loader, sass-loader
importLoaders: 2,
},
},
'csscomb-loader',
'postcss-loader',
'sass-loader',
],
};
/* ----- 設定 ----- */
module.exports = {
entry: {
main: path.resolve(dir.src, 'js/main.js'),
sub: path.resolve(dir.src, 'js/sub.js'),
style: path.resolve(dir.src, 'scss/index.scss'),
},
output: {
// 生成先のディレクトリ
path: dir.dist,
// 生成されるファイル名( 出力されるのをbundle )
filename: '[name].bundle.js',
},
resolve: {
// import文のパス指定に node_modules を省略できるようにする
modules: ['node_modules'],
// 拡張子を省略できるようにする
extensions: ['.ts', '.js', '.vue'],
alias: {
vue: 'vue/dist/vue.esm.js',
},
},
module: {
rules: [
jsRules.jsLint,
jsRules.jsCompile,
cssRules,
],
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].bundle.css',
}),
new RemoveEmptyScriptsPlugin(),
new VueLoaderPlugin(),
],
};
