在谈到现代 Web 开发范例时,我还是个新手。
我最近阅读了这篇文章以加快速度。 https://medium.com/the-node-js-collection/modern-javascript-explained-for-dinosaurs-f695e9747b70
目前正在尝试实现本文中的教程 https://codeburst.io/how-to-use-webpack-in-asp-net-core-projects-a-basic-react-template-sample-25a3681a5fc2
两者都来自 2017 年,从那时起,webpack 的语法显然发生了很大的变化。我想知道是否有人可以帮助解释为什么我会收到此错误
PS C:\Users\sgibson\source\repos\ASPNetCoreReact\ASPNetCoreReact> npm run build:dev
> ASPNetCoreReact@1.0.0 build:dev C:\Users\sgibson\source\repos\ASPNetCoreReact\ASPNetCoreReact
> webpack --mode=development
C:\Users\sgibson\source\repos\ASPNetCoreReact\ASPNetCoreReact\webpack.config.js:23
{ test: /\.css$/, use: extractCSS.extract(['css-loader?
^^^^^^^^^^^^
SyntaxError: Invalid or unexpected token
at new Script (vm.js:80:7)
at NativeCompileCache._moduleCompile (C:\Users\sgibson\source\repos\ASPNetCoreReact\ASPNetCoreReact\node_modules\v8-compile-cache\v8-compile-cache.js:226:18)
at Module._compile (C:\Users\sgibson\source\repos\ASPNetCoreReact\ASPNetCoreReact\node_modules\v8-compile-cache\v8-compile-cache.js:172:36)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
at Module.load (internal/modules/cjs/loader.js:600:32)
at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
at Function.Module._load (internal/modules/cjs/loader.js:531:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (C:\Users\sgibson\source\repos\ASPNetCoreReact\ASPNetCoreReact\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
at WEBPACK_OPTIONS (C:\Users\sgibson\source\repos\ASPNetCoreReact\ASPNetCoreReact\node_modules\webpack-cli\bin\utils\convert-argv.js:115:13)
at requireConfig (C:\Users\sgibson\source\repos\ASPNetCoreReact\ASPNetCoreReact\node_modules\webpack-cli\bin\utils\convert-argv.js:117:6)
at C:\Users\sgibson\source\repos\ASPNetCoreReact\ASPNetCoreReact\node_modules\webpack-cli\bin\utils\convert-argv.js:124:17
at Array.forEach (<anonymous>)
at module.exports (C:\Users\sgibson\source\repos\ASPNetCoreReact\ASPNetCoreReact\node_modules\webpack-cli\bin\utils\convert-argv.js:122:15)
at yargs.parse (C:\Users\sgibson\source\repos\ASPNetCoreReact\ASPNetCoreReact\node_modules\webpack-cli\bin\cli.js:71:45)
at Object.parse (C:\Users\sgibson\source\repos\ASPNetCoreReact\ASPNetCoreReact\node_modules\yargs\yargs.js:567:18)
at C:\Users\sgibson\source\repos\ASPNetCoreReact\ASPNetCoreReact\node_modules\webpack-cli\bin\cli.js:49:8
at Object.<anonymous> (C:\Users\sgibson\source\repos\ASPNetCoreReact\ASPNetCoreReact\node_modules\webpack-cli\bin\cli.js:368:3)
at Module._compile (internal/modules/cjs/loader.js:701:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
at Module.load (internal/modules/cjs/loader.js:600:32)
at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
at Function.Module._load (internal/modules/cjs/loader.js:531:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:22:18)
at Object.<anonymous> (C:\Users\sgibson\source\repos\ASPNetCoreReact\ASPNetCoreReact\node_modules\webpack\bin\webpack.js:156:2)
at Module._compile (internal/modules/cjs/loader.js:701:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
at Module.load (internal/modules/cjs/loader.js:600:32)
at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! ASPNetCoreReact@1.0.0 build:dev: `webpack --mode=development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the ASPNetCoreReact@1.0.0 build:dev script.
使用这个 webpack.config 时。
module.exports = {
entry: "./wwwroot/source/app.js",
output: {
path: path.resolve(__dirname, "wwwroot/dist"),
filename: "bundle.js"
},
plugins: [
extractCSS,
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
Popper: ["popper.js", "default"]
}),
new webpack.optimize.UglifyJsPlugin()
],
module: {
rules: [
{ test: /\.css$/, use: extractCSS.extract(["css-loader?minimize"]) },
{
test: /\.js?$/,
use: {
loader: "babel-loader",
options: { presets: ["@babel/preset-env"] }
}
}
]
}
};
Webpack 语法让我很困惑。我不太了解这里发生的流程。
最佳答案
我找到了问题的答案。我很抱歉没有给自己多一点时间来深入研究。我真的很失落。我需要仔细阅读 webpack 文件中的每个单独组件,以弄清楚它们在 2019 年与 2017 年的版本相比应该如何交互/声明。
这最终清除了所有错误
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractCSS = new ExtractTextPlugin('allstyles.css');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
optimization: {
minimizer: [new UglifyJsPlugin()],
},
entry: './wwwroot/source/app.js',
output: {
path: path.resolve(__dirname, 'wwwroot/dist'),
filename: 'bundle.js'
},
plugins: [
extractCSS,
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default']
}),
],
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.js?$/,
use: {
loader: 'babel-loader', options: {
presets:
['@babel/preset-env']
}
}
},
]
}
};
关于javascript - 令人困惑的 webpack 语法。尝试修复 2017 年旧教程中的 webpack.config 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55816812/