Я только начал обновлять свой основной проект Auredotnet aspdotnet до версии 3.0, используя обновленный шаблон, который я использовал для создания проекта.
Я поместил свои файлы (которые работали в предыдущем проекте) в эту новую версию, и в результате я получил кучу ошибок из веб-пакета, первая из которых описана в заголовке.
Веб-пакет также был обновлен.Вот первая ошибка, которую я получил ..
ERROR in ./ClientApp/public/public/public.css 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.
> @media (max-width: 767px) {
| /* On small screens, the nav menu spans the full width of the screen. Leave a space for it. */
| .body-content {
@ ./ClientApp/public/public/public.html
@ ./ClientApp/boot.ts
@ ./node_modules/aurelia-webpack-plugin/runtime/empty-entry.js
@ multi aurelia-webpack-plugin/runtime/empty-entry aurelia-webpack-plugin/runtime/pal-loader-entry es6-promise/auto aurelia-bootstrapper
Обнаружив такую же проблему , как это оказывается, у меня нет удвоения, так что это что-то еще ..
Я также извлек этот вопрос с очень похожим заголовком, но я считаю, что файл веб-пакета в порядке, так как он работал для основных файлов aurelia ..
Это Вопрос в то время как аналог имеет немного (казалось бы) настройки для меня в том, что он имеет файл разработчика веб-пакета.Для этого вот мой package.json со сценариями вверху:
{
"name": "Jobsledger.API",
"private": true,
"version": "0.0.0",
"scripts": {
"lint": "tslint --project tsconfig.json",
"webpack:Debug": "webpack --mode development",
"webpack:Release": "webpack --mode production",
"webpack:watch": "webpack --mode development --watch"
},
"devDependencies": {
"aurelia-animator-css": "^1.0.4",
"aurelia-api": "^3.2.1",
"aurelia-binding": "2.3.1",
"aurelia-bootstrap": "^0.1.20",
"aurelia-bootstrapper": "^2.3.3",
"aurelia-dialog": "^2.0.0-rc.5",
"aurelia-event-aggregator": "^1.0.3",
"aurelia-fetch-client": "^1.8.2",
"aurelia-mask": "^2.0.1",
"aurelia-pal": "^1.8.2",
"aurelia-router": "^1.7.1",
"aurelia-templating": "^1.10.2",
"aurelia-validation": "^1.4.0",
"aurelia-webpack-plugin": "^4.0.0",
"au-table": "^0.1.14",
"awesome-typescript-loader": "^5.2.1",
"bootstrap": "^4.3.1",
"clean-webpack-plugin": "^2.0.2",
"css-loader": "^2.1.1",
"es6-promise": "^4.2.6",
"fetch": "^1.1.0",
"file-loader": "^3.0.1",
"font-awesome": "^4.7.0",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.2.0",
"isomorphic-fetch": "^2.2.1",
"jquery": "^3.4.1",
"mini-css-extract-plugin": "^0.6.0",
"node-sass": "^4.12.0",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"popper.js": "^1.15.0",
"postcss-loader": "^3.0.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"tether": "^1.4.6",
"tslint": "^5.16.0",
"ts-loader": "^6.0.1",
"typescript": "^3.4.5",
"url-loader": "^1.1.2",
"velocity-animate": "^2.0.5",
"webpack": "^4.32.2",
"webpack-cli": "^3.3.2"
}
}
Я думаю, что мне может понадобиться модификация файла webpack для загрузчика, как он упоминался ... прежде чем показывать файл webpack здесьэто тот файл public.css, который вызвал первую ошибку:
@media (max-width: 767px) {
/* On small screens, the nav menu spans the full width of the screen. Leave a space for it. */
.body-content {
padding-top: 50px;
}
}
Теперь вот файл webpack.config.js
const path = require("path");
const webpack = require("webpack");
const { AureliaPlugin, ModuleDependenciesPlugin, GlobDependenciesPlugin } = require("aurelia-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const bundleOutputDir = "./wwwroot/dist";
module.exports = (env, argv) => {
if ((!argv || !argv.mode) && process.env.ASPNETCORE_ENVIRONMENT === "Development") {
argv = { mode: "development" };
}
console.log("mode =", argv.mode);
const isDevBuild = argv.mode !== "production";
const cssLoaders = ["css-loader", "postcss-loader"];
const scssLoaders = [...cssLoaders, "sass-loader"];
return [{
target: "web",
mode: isDevBuild ? "development" : "production",
entry: { "app": ["es6-promise/auto", "aurelia-bootstrapper"] },
resolve: {
extensions: [".ts", ".js"],
modules: ["ClientApp", "node_modules"]
},
output: {
path: path.resolve(bundleOutputDir),
// Asp.Net JavaScriptServices does not tolerate "/" in public path, see https://github.com/aspnet/JavaScriptServices/issues/1495
publicPath: "dist/",
filename: "[name].[hash].js",
chunkFilename: "[name].[chunkhash].js",
pathinfo: false
},
module: {
rules: [
{ test: /\.(woff|woff2|png|eot|ttf|svg)(\?|$)/, use: { loader: "url-loader", options: { limit: 1, publicPath: "./" } } },
{ test: /\.ts$/i, include: [/ClientApp/], loader: "ts-loader" },
{ test: /\.html$/i, use: "html-loader" },
{ test: /\.css$/i, include: [/node_modules/], issuer: /\.html$/i, use: cssLoaders },
{ test: /\.css$/i, include: [/node_modules/], exclude: [/bootstrap.css$/, /font-awesome.css$/], issuer: [{ not: [{ test: /\.html$/i }] }], use: ["style-loader", ...cssLoaders] },
{ test: /\.css$/, include: [/bootstrap.css$/, /font-awesome.css$/], use: [{ loader: MiniCssExtractPlugin.loader }, ...cssLoaders] },
{ test: /\.scss$/i, issuer: /(\.html|empty-entry\.js)$/i, use: scssLoaders },
{ test: /\.scss$/i, issuer: /\.ts$/i, use: ["style-loader", ...scssLoaders] }
]
},
optimization: {
splitChunks: {
chunks: "all",
// comment the following to avoid creatin a separate bundle for each npm module
maxInitialRequests: Infinity,
minSize: 0,
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name(module) {
// get the name. E.g. node_modules/packageName/not/this/part.js
// or node_modules/packageName
const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
// npm package names are URL-safe, but some servers don't like @ symbols
return `npm.${packageName.replace('@', '')}`;
}
}
}
}
},
devtool: isDevBuild ? "source-map" : false,
performance: {
hints: false
},
plugins: [
new CleanWebpackPlugin(),
new webpack.DefinePlugin({ IS_DEV_BUILD: JSON.stringify(isDevBuild) }),
new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", "window.jQuery": "jquery" }),
new HtmlWebpackPlugin({ template: 'index.ejs', filename: "../../wwwroot/index.html", inject: false, metadata: {}, alwaysWriteToDisk: true }),
new AureliaPlugin({ aureliaApp: "boot" }),
new GlobDependenciesPlugin({ "boot": ["ClientApp/**/*.{ts,html}"] }),
new ModuleDependenciesPlugin({}),
new MiniCssExtractPlugin({
filename: "[name].[hash].css",
chunkFilename: "[name].[chunkhash].css"
})
],
devServer: {
contentBase: "wwwroot/",
compress: true,
writeToDisk: true,
hot: false
}
}];
};
Для всех остальных ошибок я по существу получаюта же ошибка:
You may need an appropriate loader to handle this file type.
Так что это загрузчик какого-то типа ..
Я не уверен, что мне нужно сделать с файлом веб-пакета, чтобы сделать эту работу ..