私はJavaScriptが初めてです。JavaScript を学習するために、GitHub ( https://github.com/wbkd/webpack-starter )から webpack-starter プロジェクトを複製しました。次に、npm installデスクトップの clone フォルダーで a を実行し、Git Bash コンソールにメッセージが表示されたらnpm audit fixaを実行しました。found 1 low severity vulnerabilityそしたら、こんなメッセージを見て、npm WARN webpack-dev-middleware@3.7.2 requires a peer of webpack@^4.0.0 but none is installed. You must install peer dependencies yourself.
上記の警告を調査する前にnpm start、プロジェクト フォルダーから PowerShell を実行しました。エラー メッセージは表示されませんでしたが、ブラウザ (Chrome) が起動しませんでした。
次に、npm WARNメッセージを調査したところ、 https://stackoverflow.com/a/64733624/9698039 が見つかりました。これにより、https://github.com/webpack/webpack-dev-server/issues/2807#にたどり着きましたissuecomment-734982609、これにより、webpack のバージョンを ^5.10.0 から "webpack": "^4.0.0" にダウングレードする決定に至りました。
ダウングレードする前は、ここに私のpackage.jsonがありました:
{
"name": "webpack-starter",
"version": "1.0.0",
"description": "A light foundation for your next frontend project based on webpack.",
"scripts": {
"lint": "npm run lint:styles; npm run lint:scripts",
"lint:styles": "stylelint src",
"lint:scripts": "eslint src",
"build": "cross-env NODE_ENV=production webpack --config webpack/webpack.config.prod.js",
"start": "webpack serve --config webpack/webpack.config.dev.js"
},
"repository": {
"type": "git",
"url": "git+https://github.com/wbkd/webpack-starter.git"
},
"keywords": [
"webpack",
"startkit",
"frontend",
"es6",
"javascript",
"webdev"
],
"author": "webkid.io",
"license": "MIT",
"bugs": {
"url": "https://github.com/wbkd/webpack-starter/issues"
},
"devDependencies": {
"@babel/core": "^7.12.9",
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/preset-env": "^7.12.7",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^6.4.0",
"cross-env": "^7.0.3",
"css-loader": "^5.0.1",
"eslint": "^7.15.0",
"eslint-loader": "^4.0.2",
"file-loader": "^6.2.0",
"html-loader": "^1.3.2",
"html-webpack-plugin": "^4.5.0",
"mini-css-extract-plugin": "^1.3.2",
"node-sass": "^5.0.0",
"postcss-loader": "^4.1.0",
"sass-loader": "^10.1.0",
"style-loader": "^2.0.0",
"stylelint": "^13.8.0",
"stylelint-config-standard": "^20.0.0",
"stylelint-webpack-plugin": "^2.1.1",
"webpack": "^5.10.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^5.4.0"
},
"dependencies": {
"@babel/polyfill": "^7.12.1",
"core-js": "^3.8.1"
}
}
そして、ここに私のwebpack.config.dev.jsがありました:
const Path = require('path');
const Webpack = require('webpack');
const { merge } = require('webpack-merge');
const StylelintPlugin = require('stylelint-webpack-plugin');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'development',
devtool: 'eval-cheap-source-map',
output: {
chunkFilename: 'js/[name].chunk.js',
},
devServer: {
inline: true,
hot: true,
},
plugins: [
new Webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development'),
}),
new StylelintPlugin({
files: Path.join('src', '**/*.s?(a|c)ss'),
}),
],
module: {
rules: [
{
test: /\.js$/,
include: Path.resolve(__dirname, '../src'),
enforce: 'pre',
loader: 'eslint-loader',
options: {
emitWarning: true,
},
},
{
test: /\.html$/i,
loader: 'html-loader',
},
{
test: /\.js$/,
include: Path.resolve(__dirname, '../src'),
loader: 'babel-loader',
},
{
test: /\.s?css$/i,
use: ['style-loader', 'css-loader?sourceMap=true', 'postcss-loader', 'sass-loader'],
},
],
},
});
webpack をダウングレードするために、package.json をに変更"webpack": "^5.10.0"し、Git Bash から再度実行しました。"webpack": "^4.0.0"npm install
次に、npm startPowerShell からもう一度実行しましたが、エラー メッセージは表示されず、Compiled successfullyメッセージは表示されますが、もう一度ブラウザーが起動しません。webpack ピアの依存関係の問題は、ブラウザーが起動しない問題とは無関係であるように見えますが、私は JavaScript を初めて使用するため、現在 100% の自信を持ってその主張を行うことはできません。