我是移动应用程序开发的新手，正在尝试在当前的移动应用程序中设置Webpack。我正在按照Nativescript网站上的步骤进行操作。初始安装后，我将收到1条警告和2条错误，如下所示：
我很难理解为什么找不到我的模块。我以为我需要编辑webpack.config.js文件，但到目前为止没有成功。
在线阅读帖子（当然还有webpack --help）后，我找到了以下命令：
“ $ webpack --display-error-details”
并获得了一些在此处看到的其他信息：
错误细节告诉我要提供目标平台。我尝试将错误列表中的项目添加到appComponents数组中，但是运气不佳，以及webpack.config.js文件中的其他位置。
我当前的webpack.config.js文件：
const { join, relative, resolve, sep } = require("path");
const webpack = require("webpack");
const nsWebpack = require("nativescript-dev-webpack");
const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
const { NativeScriptWorkerPlugin } = require("nativescript-worker-loader/NativeScriptWorkerPlugin");
const TerserPlugin = require("terser-webpack-plugin");
const hashSalt = Date.now().toString();
module.exports = env => {
// Add your custom Activities, Services and other Android app components here.
const appComponents = [
"tns-core-modules/ui/frame",
"tns-core-modules/ui/frame/activity",
];
const platform = env && (env.android && "android" || env.ios && "ios");
if (!platform) {
throw new Error("You need to provide a target platform!");
}
const platforms = ["ios", "android"];
const projectRoot = __dirname;
// Default destination inside platforms/<platform>/...
const dist = resolve(projectRoot, nsWebpack.getAppPath(platform, projectRoot));
const appResourcesPlatformDir = platform === "android" ? "Android" : "iOS";
const {
// The 'appPath' and 'appResourcesPath' values are fetched from
// the nsconfig.json configuration file
// when bundling with `tns run android|ios --bundle`.
appPath = "app",
appResourcesPath = "app/App_Resources",
// You can provide the following flags when running 'tns run android|ios'
snapshot, // --env.snapshot
uglify, // --env.uglify
report, // --env.report
sourceMap, // --env.sourceMap
hiddenSourceMap, // --env.hiddenSourceMap
hmr, // --env.hmr,
unitTesting, // --env.unitTesting
} = env;
const isAnySourceMapEnabled = !!sourceMap || !!hiddenSourceMap;
const externals = nsWebpack.getConvertedExternals(env.externals);
const appFullPath = resolve(projectRoot, appPath);
const appResourcesFullPath = resolve(projectRoot, appResourcesPath);
const entryModule = nsWebpack.getEntryModule(appFullPath, platform);
const entryPath = `.${sep}${entryModule}.ts`;
const entries = { bundle: entryPath };
const tsConfigPath = resolve(projectRoot, "tsconfig.tns.json");
if (platform === "ios") {
entries["tns_modules/tns-core-modules/inspector_modules"] = "inspector_modules.js";
};
let sourceMapFilename = nsWebpack.getSourceMapFilename(hiddenSourceMap, __dirname, dist);
const config = {
mode: uglify ? "production" : "development",
context: appFullPath,
externals,
watchOptions: {
ignored: [
appResourcesFullPath,
// Don't watch hidden files
"**/.*",
]
},
target: nativescriptTarget,
entry: entries,
output: {
pathinfo: false,
path: dist,
sourceMapFilename,
libraryTarget: "commonjs2",
filename: "[name].js",
globalObject: "global",
hashSalt
},
resolve: {
extensions: [".ts", ".js", ".scss", ".css"],
// Resolve {N} system modules from tns-core-modules
modules: [
resolve(__dirname, "node_modules/tns-core-modules"),
resolve(__dirname, "node_modules"),
"node_modules/tns-core-modules",
"node_modules",
],
alias: {
'~': appFullPath
},
// resolve symlinks to symlinked modules
symlinks: true
},
resolveLoader: {
// don't resolve symlinks to symlinked loaders
symlinks: false
},
node: {
// Disable node shims that conflict with NativeScript
"http": false,
"timers": false,
"setImmediate": false,
"fs": "empty",
"__dirname": false,
},
devtool: hiddenSourceMap ? "hidden-source-map" : (sourceMap ? "inline-source-map" : "none"),
optimization: {
runtimeChunk: "single",
splitChunks: {
cacheGroups: {
vendor: {
name: "vendor",
chunks: "all",
test: (module, chunks) => {
const moduleName = module.nameForCondition ? module.nameForCondition() : '';
return /[\\/]node_modules[\\/]/.test(moduleName) ||
appComponents.some(comp => comp === moduleName);
},
enforce: true,
},
}
},
minimize: !!uglify,
minimizer: [
new TerserPlugin({
parallel: true,
cache: true,
sourceMap: isAnySourceMapEnabled,
terserOptions: {
output: {
comments: false,
semicolons: !isAnySourceMapEnabled
},
compress: {
// The Android SBG has problems parsing the output
// when these options are enabled
'collapse_vars': platform !== "android",
sequences: platform !== "android",
}
}
})
],
},
module: {
rules: [
{
test: nsWebpack.getEntryPathRegExp(appFullPath, entryPath),
use: [
// Require all Android app components
platform === "android" && {
loader: "nativescript-dev-webpack/android-app-components-loader",
options: { modules: appComponents }
},
{
loader: "nativescript-dev-webpack/bundle-config-loader",
options: {
loadCss: !snapshot, // load the application css if in debug mode
unitTesting,
appFullPath,
projectRoot,
}
},
].filter(loader => !!loader)
},
{
test: /-page\.ts$/,
use: "nativescript-dev-webpack/script-hot-loader"
},
{
test: /\.(css|scss)$/,
use: "nativescript-dev-webpack/style-hot-loader"
},
{
test: /\.(html|xml)$/,
use: "nativescript-dev-webpack/markup-hot-loader"
},
{ test: /\.(html|xml)$/, use: "nativescript-dev-webpack/xml-namespace-loader" },
{
test: /\.css$/,
use: { loader: "css-loader", options: { url: false } }
},
{
test: /\.scss$/,
use: [
{ loader: "css-loader", options: { url: false } },
"sass-loader"
]
},
{
test: /\.ts$/,
use: {
loader: "ts-loader",
options: {
configFile: tsConfigPath,
// https://github.com/TypeStrong/ts-loader/blob/ea2fcf925ec158d0a536d1e766adfec6567f5fb4/README.md#faster-builds
// https://github.com/TypeStrong/ts-loader/blob/ea2fcf925ec158d0a536d1e766adfec6567f5fb4/README.md#hot-module-replacement
transpileOnly: true,
allowTsInNodeModules: true,
compilerOptions: {
sourceMap: isAnySourceMapEnabled,
declaration: false
}
},
}
},
]
},
plugins: [
// Define useful constants like TNS_WEBPACK
new webpack.DefinePlugin({
"global.TNS_WEBPACK": "true",
"process": undefined,
}),
// Remove all files from the out dir.
new CleanWebpackPlugin([`${dist}/**/*`]),
// Copy assets to out dir. Add your own globs as needed.
new CopyWebpackPlugin([
{ from: { glob: "fonts/**" } },
{ from: { glob: "**/*.jpg" } },
{ from: { glob: "**/*.png" } },
], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }),
// Generate a bundle starter script and activate it in package.json
new nsWebpack.GenerateBundleStarterPlugin(
// Don't include `runtime.js` when creating a snapshot. The plugin
// configures the WebPack runtime to be generated inside the snapshot
// module and no `runtime.js` module exist.
(snapshot ? [] : ["./runtime"])
.concat([
"./vendor",
"./bundle",
])
),
// For instructions on how to set up workers with webpack
// check out https://github.com/nativescript/worker-loader
new NativeScriptWorkerPlugin(),
new nsWebpack.PlatformFSPlugin({
platform,
platforms,
}),
// Does IPC communication with the {N} CLI to notify events when running in watch mode.
new nsWebpack.WatchStateLoggerPlugin(),
// https://github.com/TypeStrong/ts-loader/blob/ea2fcf925ec158d0a536d1e766adfec6567f5fb4/README.md#faster-builds
// https://github.com/TypeStrong/ts-loader/blob/ea2fcf925ec158d0a536d1e766adfec6567f5fb4/README.md#hot-module-replacement
new ForkTsCheckerWebpackPlugin({
tsconfig: tsConfigPath,
async: false,
useTypescriptIncrementalApi: true,
memoryLimit: 4096
})
],
};
// Copy the native app resources to the out dir
// only if doing a full build (tns run/build) and not previewing (tns preview)
if (!externals || externals.length === 0) {
config.plugins.push(new CopyWebpackPlugin([
{
from: `${appResourcesFullPath}/${appResourcesPlatformDir}`,
to: `${dist}/App_Resources/${appResourcesPlatformDir}`,
context: projectRoot
},
]));
}
if (report) {
// Generate report files for bundles content
config.plugins.push(new BundleAnalyzerPlugin({
analyzerMode: "static",
openAnalyzer: false,
generateStatsFile: true,
reportFilename: resolve(projectRoot, "report", `report.html`),
statsFilename: resolve(projectRoot, "report", `stats.json`),
}));
}
if (snapshot) {
config.plugins.push(new nsWebpack.NativeScriptSnapshotPlugin({
chunk: "vendor",
requireModules: [
"tns-core-modules/bundle-entry-points",
],
projectRoot,
webpackConfig: config,
}));
}
if (hmr) {
config.plugins.push(new webpack.HotModuleReplacementPlugin());
}
return config;
};
我有： 1.更新了我所有的依赖 2.成功修改了短进口项目 3.尝试将错误下的这些项目添加到我的webpack.config文件中 4.从警告/错误中检查文件是否有明显的错误迹象 5.花大量时间在线寻找潜在的解决方案
我仍在努力寻找解决方案，并在网上寻找更多信息。
答案 0 :(得分：0)
如果您想跳过NativeScript CLI直接调用Webpack编译器，则需要webpack --env.ios或webpack --env.android。
关于错误，看来您在app.css和app-util.ts中有一些无效的导入。我建议您从使用tns create的示例应用程序开始。