webpack5 で .vueがコンパイルできず困っています。
いつもお世話になっております。
表題について質問です。
先ほどwebpack5の環境で.vueをコンパイルできるように環境を整えていたのですが
トライアンドエラーの末、改善せず行き詰まっております。
どなたか解決法がわかる方がいらっしゃればご教授いただけると幸いです。
環境
・webpack : 5.32.0
・webpack-cli : 4.6.0
・vue-loader : 15.9.6
・vue-template-compiler : 2.6.12
発生している問題・エラー
[webpack-cli] Failed to load '/Users/hode/aaa/webpack.prod.js' config
[webpack-cli] TypeError: VueLoaderPlugin is not a constructor
at Object.<anonymous> (/Users/hode/aaa/webpack.common.js:134:5)
at Module._compile (/Users/hode/aaa/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (/Users/hode/aaa/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
at Object.<anonymous> (/Users/hode/aaa/webpack.prod.js:4:22)
at Module._compile (/Users/hode/aaa/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
該当するソースコード
package.json
{
"name": "frontend",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"dev": "gulp Pug:Serve & webpack serve --config webpack.dev.js",
"build": "gulp Pug:Build & webpack --config webpack.prod.js",
},
"devDependencies": {
"@babel/cli": "^7.13.14",
"@babel/core": "^7.13.15",
"@babel/preset-env": "^7.13.15",
"@babel/preset-flow": "^7.13.13",
"autoprefixer": "^10.2.5",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.2.2",
"css-loader": "^5.2.1",
"css-minimizer-webpack-plugin": "^2.0.0",
"csscomb-loader": "^0.0.2",
"eslint": "^7.24.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-import-resolver-webpack": "^0.13.0",
"eslint-loader": "^4.0.2",
"eslint-plugin-flowtype": "^5.7.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^7.23.2",
"eslint-plugin-react-hooks": "^4",
"flow-bin": "^0.148.0",
"gulp": "^4.0.2",
"gulp-notify": "^3.2.0",
"gulp-plumber": "^1.2.1",
"gulp-pug": "^4.0.1",
"gulp-sass": "^4.1.0",
"html-webpack-plugin": "^5.3.1",
"mini-css-extract-plugin": "^1.4.1",
"node-sass-package-importer": "^5.3.2",
"postcss-loader": "^5.2.0",
"postcss-sort-media-queries": "^3.8.9",
"prettier": "^2.2.1",
"pug": "^3.0.2",
"pug-plain-loader": "^1.1.0",
"sass": "^1.32.8",
"sass-loader": "^11.0.1",
"style-loader": "^2.0.0",
"terser-webpack-plugin": "^5.1.1",
"ts-loader": "^8.1.0",
"typescript": "^4.2.4",
"vue-loader": "^15.9.6",
"vue-template-compiler": "^2.6.12",
"webpack": "^5.32.0",
"webpack-cli": "^4.6.0",
"webpack-dev-server": "^3.11.2",
"webpack-merge": "^5.7.3",
},
"dependencies": {
"destyle.css": "^2.0.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"vue": "^2.6.12"
}
}
webpack.common.js
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(),
],
};
webpack.prod.js
const { merge } = require('webpack-merge');
const TerserPlugin = require('terser-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const commonConfig = require('./webpack.common');
module.exports = merge(commonConfig, {
mode: 'production',
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
chunks: 'initial',
test: /node_modules/,
name: 'vendor',
},
},
},
minimizer: [
new CssMinimizerPlugin(),
new TerserPlugin({
extractComments: false,
terserOptions: {
output: {
comments: false,
beautify: false,
},
compress: {
drop_console: true,
},
},
}),
],
},
});
自分で試したこと
・https://qiita.com/7110/items/0721525ed6ccc263768b に記述されている内容を試してみましたが改善せず。
0
