- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在做一个React项目,突然意识到启动服务器时,Webpack永远无法完成(CPU使用率已满,并且Webpack的屏幕上没有输出打印内容,我用-v
开关进行了检查,没有任何改变。
id应该如何找到问题,因为我无法从npm / webpack获取任何可用信息。
编辑:
使用生产配置运行时,它可以正常工作,但是在开发配置中,它永远不会停止。打击是我的开发/生产配置:
开发人员:
/**
* DEVELOPMENT WEBPACK CONFIGURATION
*/
const path = require('path');
const fs = require('fs');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const logger = require('../../server/logger');
const cheerio = require('cheerio');
const pkg = require(path.resolve(process.cwd(), 'package.json'));
const dllPlugin = pkg.dllPlugin;
const plugins = [
new webpack.HotModuleReplacementPlugin(), // Tell webpack we want hot reloading
new webpack.NoErrorsPlugin(),
new HtmlWebpackPlugin({
inject: true, // Inject all files that are generated by webpack, e.g. bundle.js
templateContent: templateContent(), // eslint-disable-line no-use-before-define
}),
];
module.exports = require('./webpack.base.babel')({
// Add hot reloading in development
entry: [
'script!jquery/dist/jquery.js',
// 'script!materialize-css/dist/js/materialize.js',
'script!style/js/materialize.js',
'script!style/js/init.js',
'eventsource-polyfill', // Necessary for hot reloading with IE
'webpack-hot-middleware/client',
path.join(process.cwd(), 'app/app.js'), // Start with js/app.js
],
// Don't use hashes in dev mode for better performance
output: {
filename: '[name].js',
chunkFilename: '[name].chunk.js',
},
// Add development plugins
plugins: dependencyHandlers().concat(plugins).concat(new CircularDependencyPlugin({
// exclude detection of files based on a RegExp
exclude: /a\.js/,
// add errors to webpack instead of warnings
failOnError: true
})
), // eslint-disable-line no-use-before-define
// Load the CSS in a style tag in development
cssLoaders: 'style-loader!css-loader?localIdentName=[local]__[path][name]__[hash:base64:5]&importLoaders=1',
// Tell babel that we want to hot-reload
babelQuery: {
presets: ['react-hmre'],
},
// Emit a source map for easier debugging
// devtool: 'cheap-module-eval-source-map',
devtool: 'source-map',
});
/**
* Select which plugins to use to optimize the bundle's handling of
* third party dependencies.
*
* If there is a dllPlugin key on the project's package.json, the
* Webpack DLL Plugin will be used. Otherwise the CommonsChunkPlugin
* will be used.
*
*/
function dependencyHandlers() {
// Don't do anything during the DLL Build step
if (process.env.BUILDING_DLL) {
return [];
}
// If the package.json does not have a dllPlugin property, use the CommonsChunkPlugin
if (!dllPlugin) {
return [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
children: true,
minChunks: 2,
async: true,
}),
];
}
const dllPath = path.resolve(process.cwd(), dllPlugin.path || 'node_modules/react-boilerplate-dlls');
/**
* If DLLs aren't explicitly defined, we assume all production dependencies listed in package.json
* Reminder: You need to exclude any server side dependencies by listing them in dllConfig.exclude
*
* @see https://github.com/mxstbr/react-boilerplate/tree/master/docs/general/webpack.md
*/
if (!dllPlugin.dlls) {
const manifestPath = path.resolve(dllPath, 'reactBoilerplateDeps.json');
if (!fs.existsSync(manifestPath)) {
logger.error('The DLL manifest is missing. Please run `npm run build:dll`');
process.exit(0);
}
return [
new webpack.DllReferencePlugin({
context: process.cwd(),
manifest: require(manifestPath), // eslint-disable-line global-require
}),
];
}
// If DLLs are explicitly defined, we automatically create a DLLReferencePlugin for each of them.
const dllManifests = Object.keys(dllPlugin.dlls).map((name) => path.join(dllPath, `/${name}.json`));
return dllManifests.map((manifestPath) => {
if (!fs.existsSync(path)) {
if (!fs.existsSync(manifestPath)) {
logger.error(`The following Webpack DLL manifest is missing: ${path.basename(manifestPath)}`);
logger.error(`Expected to find it in ${dllPath}`);
logger.error('Please run: npm run build:dll');
process.exit(0);
}
}
return new webpack.DllReferencePlugin({
context: process.cwd(),
manifest: require(manifestPath), // eslint-disable-line global-require
});
});
}
/**
* We dynamically generate the HTML content in development so that the different
* DLL Javascript files are loaded in script tags and available to our application.
*/
function templateContent() {
const html = fs.readFileSync(
path.resolve(process.cwd(), 'app/index.html')
).toString();
if (!dllPlugin) {
return html;
}
const doc = cheerio(html);
const body = doc.find('body');
const dllNames = !dllPlugin.dlls ? ['reactBoilerplateDeps'] : Object.keys(dllPlugin.dlls);
dllNames.forEach((dllName) => body.append(`<script data-dll='true' src='/${dllName}.dll.js'></script>`));
return doc.toString();
}
// Important modules this config uses
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const OfflinePlugin = require('offline-plugin');
module.exports = require('./webpack.base.babel')({
// In production, we skip all hot-reloading stuff
entry: [
'script!jquery/dist/jquery.min.js',
// 'script!materialize-css/dist/js/materialize.min.js',
'script!style/js/materialize.min.js',
'script!style/js/init.js',
path.join(process.cwd(), 'app/app.js'),
],
// Utilize long-term caching by adding content hashes (not compilation hashes) to compiled assets
output: {
filename: '[name].[chunkhash].js',
chunkFilename: '[name].[chunkhash].chunk.js',
},
// We use ExtractTextPlugin so we get a separate CSS file instead
// of the CSS being in the JS and injected as a style tag
cssLoaders: ExtractTextPlugin.extract({
fallbackLoader: 'style-loader',
loader: 'css-loader?modules&-autoprefixer&importLoaders=1!postcss-loader',
}),
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
children: true,
minChunks: 2,
async: true,
}),
// OccurrenceOrderPlugin is needed for long-term caching to work properly.
// See http://mxs.is/googmv
new webpack.optimize.OccurrenceOrderPlugin(true),
// Merge all duplicate modules
new webpack.optimize.DedupePlugin(),
// Minify and optimize the JavaScript
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false, // ...but do not show warnings in the console (there is a lot of them)
},
}),
// Minify and optimize the index.html
new HtmlWebpackPlugin({
template: 'app/index.html',
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
inject: true,
}),
// Extract the CSS into a separate file
new ExtractTextPlugin('[name].[contenthash].css'),
// Put it in the end to capture all the HtmlWebpackPlugin's
// assets manipulations and do leak its manipulations to HtmlWebpackPlugin
new OfflinePlugin({
relativePaths: false,
publicPath: '/',
// No need to cache .htaccess. See http://mxs.is/googmp,
// this is applied before any match in `caches` section
excludes: ['.htaccess'],
caches: {
main: [':rest:'],
// All chunks marked as `additional`, loaded after main section
// and do not prevent SW to install. Change to `optional` if
// do not want them to be preloaded at all (cached only when first loaded)
additional: ['*.chunk.js'],
},
// Removes warning for about `additional` section usage
safeToUseOptionalCaches: true,
AppCache: false,
}),
],
});
最佳答案
我发现这是我项目中循环依赖的原因。可能我在开发配置中使用的某些插件对此不满意。
关于javascript - Webpack永不结束,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42768153/
我正在编写一个类,我想知道哪一对方法更适合描述流程周期: start() -> stop() start() -> end() start() -> finish() 基本上这些方法将在执行任务之前和
对于 Android 小部件类名称是否应以“View”、“Layout”或两者都不结尾,是否存在模式或命名约定? 最佳答案 如果该类扩展了 View(或在其层次结构中扩展了 View),那么它应该以“
我正在尝试找到一个插件,该插件将使用 Verilog 突出显示匹配的开始/结束语句。 VIM 让它与花括号/括号一起工作,但它不能与它的开始/结束一起工作。我希望 VIM 突出显示正确的开始到正确的结
给出以下代码: % Generate some random data n = 10; A = cell(n, 1); for i=1:n A{i} = timeseries; A{i
我需要知道是否可以检测输入何时开始聚焦以及何时结束焦点 HTML 代码: JQuery 代码(仅示例我如何需要它): $('.datas').on('focusStart', alert("fo
所以我一直在思考一款游戏的想法,一款需要穿越时空的游戏。因此,我编写了一个 JFrame 来显示螺旋的 .gif,但它并没有在对话框显示时结束,而是保留在后台。我可以解决这个问题吗? import j
给出以下使用多线程的 Java 示例: import java.util.concurrent.*; public class SquareCalculator { private Ex
好吧,我有一个 do-while 循环,应该在使用点击“q”时结束,但它给了我错误消息,请帮忙。 package Assignments; import java.util.*; public cla
我如何有选择地匹配开始 ^或结束 $正则表达式中的一行? 例如: /(?\\1', $str); 我的字符串开头和结尾处的粗体边缘情况没有被匹配。我在使用其他变体时遇到的一些极端情况包括字符串内匹配、
我试图让程序在总数达到 10 时结束,但由于某种原因,我的 while 循环在达到 10 时继续计数。一旦回答了 10 个问题,我就有 int 百分比来查找百分比。 import java.util.
jQuery 中的 end() 函数将元素集恢复到上次破坏性更改之前的状态,因此我可以看到它应该如何使用,但我已经看到了一些代码示例,例如:on alistapart (可能来自旧版本的 jQuery
这个问题在这里已经有了答案: How to check if a string "StartsWith" another string? (18 个答案) 关闭 9 年前。 var file =
我正在尝试在 travis 上设置两个数据库,但它只是在 before_install 声明的中途停止: (END) No output has been received in the last 1
我创建了一个简单的存储过程,它循环遍历一个表的行并将它们插入到另一个表中。由于某种原因,END WHILE 循环抛出缺少分号错误。所有代码对我来说都是正确的,并且所有分隔符都设置正确。我只是不明白为什
您好,我正在使用 AVSpeechSynthesizer 和 AVSpeechUtterance 构建一个 iOS 7 应用程序,我想弄清楚合成何时完成。更具体地说,我想在合成结束时更改播放/暂停按钮
这是我的代码,我试图在响应后显示警报。但没有显示操作系统警报 string filepath = ConfigurationManager.AppSettings["USPPath"].ToStri
我想创建一个循环,在提供的时间段、第一天和最后一天返回每个月(考虑到月份在第 28-31 天结束):(“function_to_increase_month”尚未定义) for beg in pd.d
我目前正在用 Python 3.6 为一个骰子游戏编写代码,我知道我的编码在这方面有点不对劲,但是,我真的只是想知道如何开始我的 while 循环。游戏说明如下…… 人类玩家与计算机对战。 玩家 1
所以我已经了解了如何打开 fragment。这是我的困境。我的 view 旁边有一个元素列表(元素周期表元素)。当您选择一个元素时,它会显示它的信息。 我的问题是我需要能够从(我们称之为详细信息 fr
我想检测用户何时停止滚动页面/元素。这可能很棘手,因为最近对 OSX 滚动行为的增强创造了这种新的惯性效应。是否触发了事件? 我能想到的唯一其他解决方案是在页面/元素的滚动位置不再改变时使用间隔来拾取
我是一名优秀的程序员,十分优秀!