我从webpack dev server 3.11.2升级到4.4.0,在npm run dev
上收到这些过时的警告:"dev": "webpack serve --config webpack.dev.js",
(node:33156) [DEP_WEBPACK_DEV_SERVER_CONSTRUCTOR] DeprecationWarning: Using 'compiler' as the first argument is deprecated. Please use 'options' as the first argument and 'compiler' as the second argument. (node:33156) [DEP_WEBPACK_DEV_SERVER_LISTEN] DeprecationWarning: 'listen' is deprecated. Please use async 'start' or 'startCallback' methods
我甚至没有在配置中使用new WebpackDevServer
来更改选项和编译器的顺序,也没有使用listen()
。我不明白为什么会收到这些警告,也不知道如何解决它们。
有人知道如何解决这些警告吗?谢谢!
webpack.common.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const env = process.env.NODE_ENV || 'development';
module.exports = {
output: {
path: path.resolve(__dirname, `dist/${env}`),
filename: '[name]-[fullhash].js',
publicPath: '/', // used for routing
},
resolve: {
modules: [path.resolve(__dirname, './src'), 'node_modules'],
alias: {
components: path.resolve(__dirname, './src/components'),
store: path.resolve(__dirname, './src/store'),
helpers: path.resolve(__dirname, './src/helpers'),
constants: path.resolve(__dirname, './src/constants'),
config: path.resolve(__dirname, './src/config'),
},
fallback: {
fs: false,
tls: false,
net: false,
path: false,
zlib: false,
http: false,
https: false,
stream: false,
crypto: false,
},
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: {
loader: 'babel-loader',
},
exclude: [/node_modules/],
},
{
test: /\.(png|svg|jpg|jpeg|gif|ico)$/,
use: {
loader: 'url-loader',
},
},
{
test: /\.(css|scss|sass)$/,
use: [MiniCssExtractPlugin.loader, 'css-loader'],
},
],
},
plugins: [
new HtmlWebpackPlugin({
hash: true, // cache busting
template: 'public/index.html',
favicon: './public/favicon.ico',
}),
// creates a separate style.css file instead of adding the styles to the bundle.js
new MiniCssExtractPlugin({
filename: '[name].[fullhash].css',
chunkFilename: '[id].[fullhash].css',
}),
new CleanWebpackPlugin({ cleanAfterEveryBuildPatterns: [`dist/${env}`] }),
new CopyWebpackPlugin({
patterns: [{ from: 'src/server', to: 'server' }],
}),
],
};
webpack.dev.js
require('dotenv-override').config({ override: true });
const express = require('express');
const { merge } = require('webpack-merge');
const webpack = require('webpack');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const common = require('./webpack.common');
const setupProxy = require('./src/server/proxy');
const loggingEndpoint = require('./src/server/logging/loggingEndpoint');
module.exports = merge(common, {
mode: 'development',
devServer: {
// inline: true, // refreshes the page on change
open: true,
port: 8081,
historyApiFallback: {
index: '/', // used for routing (404 response), and address bar routing
},
onBeforeSetupMiddleware: (server) => {
setupProxy(server.app);
server.app.use(express.json());
server.app.use(express.urlencoded({ extended: true }));
server.app.post('/logging', loggingEndpoint);
},
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development'),
}),
new BundleAnalyzerPlugin({
analyzerMode: 'disabled', // server mode displays report
}),
],
devtool: 'cheap-module-source-map',
});
2条答案
按热度按时间ygya80vv1#
我不得不更新其他webpack软件包,这就做到了;)
旧版:
新产品:
所以只要更新所有的东西,这就成功了。
bnlyeluc2#
按照以下步骤操作
1.求解选项与编译器https://github.com/heartexlabs/label-studio-frontend/pull/296/commits/ded728c002d510d00d386b5cb5fc84feb977dbad
1.解算接听https://github.com/heartexlabs/label-studio-frontend/pull/296/commits/4305393e86856a19d1e6d3ee7677aa4abbbf4071
主线程在https://github.com/heartexlabs/label-studio-frontend/pull/296下