我创建了默认的 IntelliJ IDEA React 项目并得到了这个：
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:67:19)
at Object.createHash (node:crypto:130:10)
at module.exports (/Users/user/Programming Documents/WebServer/untitled/node_modules/webpack/lib/util/createHash.js:135:53)
at NormalModule._initBuildHash (/Users/user/Programming Documents/WebServer/untitled/node_modules/webpack/lib/NormalModule.js:417:16)
at handleParseError (/Users/user/Programming Documents/WebServer/untitled/node_modules/webpack/lib/NormalModule.js:471:10)
at /Users/user/Programming Documents/WebServer/untitled/node_modules/webpack/lib/NormalModule.js:503:5
at /Users/user/Programming Documents/WebServer/untitled/node_modules/webpack/lib/NormalModule.js:358:12
at /Users/user/Programming Documents/WebServer/untitled/node_modules/loader-runner/lib/LoaderRunner.js:373:3
at iterateNormalLoaders (/Users/user/Programming Documents/WebServer/untitled/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
at iterateNormalLoaders (/Users/user/Programming Documents/WebServer/untitled/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
/Users/user/Programming Documents/WebServer/untitled/node_modules/react-scripts/scripts/start.js:19
throw err;
^
这似乎是最近的一个问题 - webpack 4 天前就遇到了这个问题，并且仍在处理中。
我正在尝试总结我对最流行的JavaScript包管理器,捆绑包和任务运行器的了解.如果我错了,请纠正我:
npm&bower是包管理员.他们只是下载依赖项,不知道如何自己构建项目.他们知道的是在获取所有依赖项之后调用webpack/ gulp/ grunt.bower就像npm,但是构建了扁平的依赖树(不像npm递归那样).含义npm获取每个依赖项的依赖项(可能会获取相同的几次),同时bower期望您手动包含子依赖项.有时bower并npm分别用于前端和后端(因为每兆字节在前端可能很重要).grunt并且gulp是任务运行者自动化所有可以自动化的东西(即编译CSS/Sass,优化图像,制作捆绑并缩小/转换它).gruntvs. gulp(就像mavenvs. gradle或配置与代码).Grunt基于配置单独的独立任务,每个任务打开/处理/关闭文件.Gulp需要的代码量较少,并且基于节点流,这使得它可以构建管道链(无需重新打开同一个文件)并使其更快.webpack(webpack-dev-server) - 对我来说,这是一个热门重新加载更改的任务运行器,可以让你忘记所有JS/CSS观察者.npm/ bower+ plugins可以替换任务运行器.他们的能力经常交叉,所以如果你需要使用gulp/ gruntover npm+插件,会有不同的含义.但是,跑步者的任务是复杂的任务肯定更好(例如,"每个建设创建捆绑,从ES6 transpile到ES5,在所有浏览器模拟器中运行它,使屏幕截图和部署通过FTP收存箱").browserify允许为浏览器打包节点模块.browserifyvs node的require实际上是AMD vs CommonJS.问题:
webpack&webpack-dev-server？官方文档说它是一个模块捆绑器,但对我来说它只是一个任务运行器.有什么不同？browserify？我们不能对node/ES6导入做同样的事情吗？ gulp …我创建了一个空白的 React 项目，使用命令：npx create-react-appon npm v7.0.7 和 Node v15.0.1
安装：
然后我尝试将空白的 .scss 文件导入 App 组件：
应用程序.js
import './App.scss'
function App() {
return (
<div className="App">
App
</div>
);
}
export default App;
抛出错误：
Failed to compile.
./src/App.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/s
ass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/App.scss)
Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.
包.json
{
"name": "react-17-node-sass-5",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.5",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"node-sass": "^5.0.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.0",
"web-vitals": "^0.2.4" …我遇到了一个 Webpack 构建过程突然中断的问题，导致以下错误......
\n<s> [webpack.Progress] 10% building 0/1 entries 0/0 dependencies 0/0 modules\nnode:internal/crypto/hash:67\n this[kHandle] = new _Hash(algorithm, xofLen);\n ^\n\nError: error:0308010C:digital envelope routines::unsupported\n at new Hash (node:internal/crypto/hash:67:19)\n at Object.createHash (node:crypto:130:10)\n at BulkUpdateDecorator.hashFactory (/app/node_modules/webpack/lib/util/createHash.js:155:18)\n at BulkUpdateDecorator.update (/app/node_modules/webpack/lib/util/createHash.js:46:50)\n at OriginalSource.updateHash (/app/node_modules/webpack-sources/lib/OriginalSource.js:131:8)\n at NormalModule._initBuildHash (/app/node_modules/webpack/lib/NormalModule.js:888:17)\n at handleParseResult (/app/node_modules/webpack/lib/NormalModule.js:954:10)\n at /app/node_modules/webpack/lib/NormalModule.js:1048:4\n at processResult (/app/node_modules/webpack/lib/NormalModule.js:763:11)\n at /app/node_modules/webpack/lib/NormalModule.js:827:5 {\n opensslErrorStack: [ \'error:03000086:digital envelope routines::initialization error\' ],\n library: \'digital envelope routines\',\n reason: \'unsupported\',\n code: \'ERR_OSSL_EVP_UNSUPPORTED\'\n}\ncommand terminated with exit code 1\n我尝试过谷歌搜索ERR_OSSL_EVP_UNSUPPORTED webpack，几乎没有产生任何有用的结果，但它确实突出了使用OpenSSL提供的 …
我在我的应用程序中使用Webpack,在其中我创建了两个入口点 - 所有JavaScript文件/代码的bundle.js,以及jQuery和React等所有库的vendors.js.我怎么做才能使用jQuery作为依赖项的插件,我想在vendors.js中也有它们？如果这些插件有多个依赖项怎么办？
目前我正在尝试使用这个jQuery插件 - https://github.com/mbklein/jquery-elastic.Webpack文档提到了applyPlugin和imports-loader.我使用了providePlugin,但仍然没有jQuery对象.以下是我的webpack.config.js的样子 -
var webpack = require('webpack');
var bower_dir = __dirname + '/bower_components';
var node_dir = __dirname + '/node_modules';
var lib_dir = __dirname + '/public/js/libs';
var config = {
addVendor: function (name, path) {
this.resolve.alias[name] = path;
this.module.noParse.push(new RegExp(path));
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jquery: "jQuery",
"window.jQuery": "jquery"
}),
new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js', Infinity)
],
entry: {
app: ['./public/js/main.js'],
vendors: ['react','jquery']
},
resolve: {
alias: {
'jquery': node_dir + '/jquery/dist/jquery.js',
'jquery.elastic': lib_dir …我想在这个帖子中跟踪和更新最新的(并且希望是最简单的)方法来捆绑Angular(版本2,4,...)以便在实时Web服务器上进行生产.
请在答案中包含Angular版本,以便我们可以更好地跟踪它何时转移到更高版本.
我是React + Webpack的初学者.
我在我的hello world web应用程序中发现了一个奇怪的错误.
我在webpack中使用babel-loader来帮助我将jsx转换为js,但看起来babel无法理解jsx语法.
这是我的依赖项:
"devDependencies": {
"babel-core": "^6.0.14",
"babel-loader": "^6.0.0",
"webpack": "^1.12.2",
"webpack-dev-server": "^1.12.1"
},
"dependencies": {
"react": "^0.14.1"
}
这是我的 webpack.config.js
var path = require('path');
module.exports = {
entry: ['webpack/hot/dev-server',path.resolve(__dirname, 'app/main.js')],
output: {
path: path.resolve(__dirname, 'build'),
filename: 'bundle.js'
},
module: {
loaders: [
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"}
]
}
};
这是我的 app/main.js
var React = require("react");
React.render(<h1>hello world</h1>,document.getElementById("app"));
这是错误信息
ERROR in ./app/main.js
Module build failed: SyntaxError: ~/**/app/main.js: Unexpected token (2:13)
1 | …我是webpack的新手,我需要设置一下来生成源图.我正在webpack serve从命令行运行,它成功编译.但我真的需要源图.这是我的webpack.config.js.
var webpack = require('webpack');
module.exports = {
output: {
filename: 'main.js',
publicPath: '/assets/'
},
cache: true,
debug: true,
devtool: true,
entry: [
'webpack/hot/only-dev-server',
'./src/components/main.js'
],
stats: {
colors: true,
reasons: true
},
resolve: {
extensions: ['', '.js', '.jsx'],
alias: {
'styles': __dirname + '/src/styles',
'mixins': __dirname + '/src/mixins',
'components': __dirname + '/src/components/',
'stores': __dirname + '/src/stores/',
'actions': __dirname + '/src/actions/'
}
},
module: {
preLoaders: [{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: 'jsxhint'
}],
loaders: …我试图从移动Gulp到Webpack.在Gulp我有任务将所有文件和文件夹从/ static /文件夹复制到/ build /文件夹.怎么做同样的Webpack？我需要一些插件吗？
我正在尝试将一个角度应用程序从gulp转换为webpack.在gulp我使用gulp-preprocess来替换html页面中的一些变量(例如数据库名称),具体取决于NODE_ENV.使用webpack实现类似结果的最佳方法是什么？