我正在尝试将我的应用程序从Webpack3迁移到Webpack4。我在dev build中面临问题。 它没有抛出任何错误。它被绞死了。请在下面找到我的webpack dev配置。我新添加的更改是1.Removed extract-text-webpack-plugin，2.optimization.splitChunks而不是CommonsChunkPlugin 3.使用mini-css-extract-plugin而不是extract-文本的WebPack的插件。
const path = require('path');
const paths = require('./paths');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// const ExtractTextPlugin = require('extract-text-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');
process.env.NODE_ENV = 'development';
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const data = {
devtool: 'source-map',
context: paths.context,
mode: 'development',
entry: [
'react-hot-loader/patch',
'webpack-dev-server/client?http://0.0.0.0:3030',
'webpack/hot/only-dev-server',
paths.appIndexJs
],
output: {
path: '/',
filename: 'static/js/[name].bundle.js',
publicPath: '/',
jsonpFunction: 'myfunction'
},
optimization: {
namedModules: true,
splitChunks: {
cacheGroups: {
commons: { test: /[\\/]node_modules[\\/]/, name: "vendors", chunks: "all" }
}
},
noEmitOnErrors: true,
concatenateModules: true
},
module: {
rules: [
{
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
use: [
{
loader: 'file-loader',
options: {
name: 'static/images/[name].[ext]'
}
}
]
},
{
test: /\.js$/,
exclude: [/node_modules/],
use: [
{
loader: 'babel-loader',
options: {
presets: [
[
'latest',
{
es2015: {
modules: false
}
}
],
'react',
'react-hmre'
],
plugins: [
'transform-class-properties',
['transform-object-rest-spread', { useBuiltIns: true }],
// Polyfills the runtime needed for async/await and generatorss
[
'transform-runtime',
{
helpers: false,
polyfill: false,
regenerator: true,
moduleName: path.dirname(require.resolve('babel-runtime/package'))
}
],
[
'transform-regenerator',
{
// Async functions are converted to generators by babel-preset-latest
async: false
}
]
]
}
}
]
},
{
test: /\.css$/,
exclude: [/node_modules/],
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
modules: true,
localIdentName: '[name]__[local]',
importLoader: 1
}
},
{
loader: `postcss-loader`,
options: {
options: {},
}
}
// { loader: 'postcss-loader', options: { config: { path: 'config/postcss.config.js' } } }
]
},
{
test: /\.css$/,
exclude: [/src/],
include: [/node_modules/],
use: [
MiniCssExtractPlugin.loader,
"css-loader"
]
},
{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader'
]
}
]
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': '"development"',
__IMAGE_PATH__: '""',
__ENV__: '"development"'
}),
new webpack.LoaderOptionsPlugin({
options: {
postcss: [
require('postcss-import')({
path: process.cwd() + '/src/styles/',
addDependencyTo: webpack
}),
require('postcss-modules-resolve-from-alias')({
css: process.cwd() + '/src/styles'
}),
require('postcss-mixins'),
require('postcss-nested'),
require('postcss-cssnext')
]
}
}),
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin(),
// new ExtractTextPlugin({ filename: 'static/css/main.css', allChunks: true }),
new MiniCssExtractPlugin({
filename: 'static/css/main.[chunkhash:8].css',
chunkFilename: "[name].css"
}),
new CopyWebpackPlugin([{ from: '../src/styles/images', to: 'static/images' }]),
new CopyWebpackPlugin([{ from: '../public/images', to: 'static/images' }]),
new webpack.ContextReplacementPlugin(/moment[\\\/]locale$/, /^\.\/(en)$/),
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin({
inject: true,
template: paths.appHtml,
basePath: ''
}),
new BundleAnalyzerPlugin()
],
resolve: {
modules: [paths.context, paths.context + '/styles/', 'node_modules']
},
devServer: {
contentBase: paths.context,
port: 3030,
hot: true,
inline: false,
historyApiFallback: true
}
};
module.exports = data;
请在终端
中找到以下详细信息$ npm run start:dev
> myapp@1.0.0 start:dev
> webpack-dev-server --config config/webpack.config.dev.js
ℹ ｢wds｣: Project is running at http://localhost:3030/webpack-dev-server/
ℹ ｢wds｣: 404s will fallback to /index.html
(node:50691) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.
答案 0 :(得分：0)
我找到了问题并修复了它。问题是webpack4构建创建循环过程，因此它继续在内部运行。当我试图运行生产构建时，它会抛出循环冗余问题。
添加chunksSortMode选项并将其设置为“none”即可解决该问题。