我删除了 webpack.config.js 以创建 3 个不同的 webpack 配置文件,即 webpack.common.js、webpack.prod.js、webpack.dev.js。使用 webpack.config.js 后,项目运行良好npm run start
。但是在将配置分离为 3 个不同的文件后,构建失败并出现此错误
$ npm run start
> resume@1.0.0 start C:\Users\Ankit Rawat\projects\resume
> webpack serve --open --config webpack.dev.js
[webpack-cli] The specified config file doesn't exist in 'C:\Users\Ankit Rawat\projects\resume\webpack.dev.js'
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! resume@1.0.0 start: `webpack serve --open --config webpack.dev.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the resume@1.0.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Ankit Rawat\AppData\Roaming\npm-cache\_logs\2021-01-14T06_54_14_483Z-debug.log
npm run build 也因同样的错误而失败。
webpack.common.js
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app: './src/index.js',
},
module: {
rules: [
// JavaScript
{
test: /\.js$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
// Images
{
test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
type: 'asset/resource',
},
],
},
plugins: [
// new CleanWebpackPlugin(['dist/*']) for < v2 versions of CleanWebpackPlugin
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: 'HEY !!',
template: path.resolve(__dirname, './index.html'),
filename: 'index.html', // output file
}),
new webpack.ProvidePlugin({ // no need to import React and ReactDOM in every component created, after using this
'React': 'react',
'ReactDOM': 'react-dom',
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
},
};
webpack.dev.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
historyApiFallback: true,
contentBase: path.resolve(__dirname, './dist'),
open: true,
compress: true,
hot: true,
port: 8080,
},
plugins: [
new webpack.HotModuleReplacementPlugin()
],
module: {
rules: [
// CSS and Sass
{
test: /\.(scss|css)$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
}
],
},
});
webpack.prod.js
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
module.exports = merge(common, {
mode: 'production',
devtool: 'source-map',
module: {
rules: [
{
test: /\.css$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
},
],
},
optimization: {
minimizer: [
new CssMinimizerPlugin(),
],
},
});
包.json
{
"name": "resume",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack serve --open --config webpack.dev.js",
"build": "webpack --config webpack.prod.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@babel/preset-react": "^7.12.10",
"css-minimizer-webpack-plugin": "^1.2.0",
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
"devDependencies": {
"@babel/core": "^7.12.10",
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@babel/preset-env": "^7.12.11",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^5.0.1",
"html-webpack-plugin": "^4.5.1",
"mini-css-extract-plugin": "^1.3.3",
"node-sass": "^5.0.0",
"react-hot-loader": "^4.13.0",
"sass-loader": "^10.1.1",
"style-loader": "^2.0.0",
"webpack": "^5.12.2",
"webpack-cli": "^4.3.1",
"webpack-dev-server": "^3.11.1",
"webpack-merge": "^5.7.3"
}
}
这是我的webpack.config.js,现在已删除
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const { web } = require('webpack')
module.exports = {
mode: 'development',
devServer: {
historyApiFallback: true,
contentBase: path.resolve(__dirname, './dist'),
open: true,
compress: true,
hot: true,
port: 8080,
},
// entry: {
// main: path.resolve(__dirname, './src/index.js'),
// },
// output: {
// path: path.resolve(__dirname, './dist'),
// filename: '[name].bundle.js',
// },
module: {
rules: [
// JavaScript
{
test: /\.js$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
// CSS and Sass
{
test: /\.(scss|css)$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
},
// Images
{
test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
type: 'asset/resource',
},
],
},
plugins: [
new HtmlWebpackPlugin({
title: 'HEY !!',
template: path.resolve(__dirname, './index.html'),
filename: 'index.html', // output file
}),
new CleanWebpackPlugin(),
new webpack.HotModuleReplacementPlugin(), // ONLY FOR DEVELOPMENT
new webpack.ProvidePlugin({ // no need to import React and ReactDOM in every component created, after using this
'React': 'react',
'ReactDOM': 'react-dom',
})
],
}
我无法在这里解决问题。请帮忙。