ฉันกำลังมองหาวิธีที่จะทำให้แอป Aurelia/ESNext/Webpack ของฉันทำงานร่วมกับ PhoneGap (รุ่น Android) ไฟล์ที่รวมกลุ่มจะอยู่ในโฟลเดอร์ "www" เมื่อมองไปที่ผู้ตรวจสอบ ดูเหมือนว่าเซิร์ฟเวอร์ webpack กำลังร้องขอไฟล์บางไฟล์จากโฟลเดอร์ที่ไม่ถูกต้องเมื่อเรียกใช้แอปบนโทรศัพท์
มีความคิดวิธีกำหนดค่า Aurelia/Webpack อย่างถูกต้องเพื่อให้ทำงานได้อย่างไร
นี่คือ webpack.config.js ของฉัน:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const project = require('./aurelia_project/aurelia.json');
const { AureliaPlugin, ModuleDependenciesPlugin } = require('aurelia-webpack-plugin');
const { optimize: { CommonsChunkPlugin, UglifyJsPlugin }, ProvidePlugin } = require('webpack');
// config helpers:
const ensureArray = (config) => config && (Array.isArray(config) ? config : [config]) || [];
const when = (condition, config, negativeConfig) =>
condition ? ensureArray(config) : ensureArray(negativeConfig);
// primary config:
const title = 'App';
const outDir = path.resolve(__dirname, project.platform.output);
const srcDir = path.resolve(__dirname, 'src');
const nodeModulesDir = path.resolve(__dirname, 'node_modules');
const baseUrl = '/';
const cssRules = [
{ loader: 'css-loader' },
];
module.exports = ({production, server, extractCss, coverage, platform} = {}) => ({
resolve: {
extensions: ['.js'],
modules: [srcDir, 'node_modules'],
},
entry: {
app: ['aurelia-bootstrapper'],
vendor: ['bluebird'],
},
output: {
path: outDir,
publicPath: (platform || 'browser') === 'mobile' ? './' : baseUrl,
filename: production ? '[name].[chunkhash].bundle.js' : '[name].[hash].bundle.js',
sourceMapFilename: production ? '[name].[chunkhash].bundle.map' : '[name].[hash].bundle.map',
chunkFilename: production ? '[name].[chunkhash].chunk.js' : '[name].[hash].chunk.js'
},
devServer: {
contentBase: outDir,
// serve index.html for all 404 (required for push-state)
historyApiFallback: true
},
devtool: production ? 'nosources-source-map' : 'cheap-module-eval-source-map',
module: {
rules: [
// CSS required in JS/TS files should use the style-loader that auto-injects it into the website
// only when the issuer is a .js/.ts file, so the loaders are not applied inside html templates
{
test: /\.css$/i,
issuer: [{ not: [{ test: /\.html$/i }] }],
use: extractCss ? ExtractTextPlugin.extract({
fallback: 'style-loader',
use: cssRules
}) : ['style-loader', ...cssRules],
},
{
test: /\.css$/i,
issuer: [{ test: /\.html$/i }],
// CSS required in templates cannot be extracted safely
// because Aurelia would try to require it again in runtime
use: cssRules
},
{
test: /\.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
issuer: /\.[tj]s$/i
},
{
test: /\.scss$/,
use: ['css-loader', 'sass-loader'],
issuer: /\.html?$/i
},
{ test: /\.html$/i, loader: 'html-loader' },
{ test: /\.js$/i, loader: 'babel-loader', exclude: nodeModulesDir,
options: coverage ? { sourceMap: 'inline', plugins: [ 'istanbul' ] } : {},
},
{ test: /\.json$/i, loader: 'json-loader' },
// use Bluebird as the global Promise implementation:
{ test: /[\/\\]node_modules[\/\\]bluebird[\/\\].+\.js$/, loader: 'expose-loader?Promise' },
// embed small images and fonts as Data Urls and larger ones as files:
{ test: /\.(png|gif|jpg|cur)$/i, loader: 'url-loader', options: { limit: 8192 } },
{ test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'url-loader', options: { limit: 10000, mimetype: 'application/font-woff2' } },
{ test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'url-loader', options: { limit: 10000, mimetype: 'application/font-woff' } },
// load these fonts normally, as files:
{ test: /\.(ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'file-loader' },
]
},
plugins: [
new AureliaPlugin(),
new ProvidePlugin({
'Promise': 'bluebird'
}),
new ModuleDependenciesPlugin({
'aurelia-testing': [ './compile-spy', './view-spy' ]
}),
new HtmlWebpackPlugin({
template: 'index.ejs',
metadata: {
// available in index.ejs //
title, server, baseUrl
}
}),
...when(extractCss, new ExtractTextPlugin({
filename: production ? '[contenthash].css' : '[id].css',
allChunks: true
})),
...when(production, new CommonsChunkPlugin({
name: ['common']
})),
...when(true, new CopyWebpackPlugin([
{ from: 'src/static', to: 'static', ignore: ['*.sass', '*.scss'] },
{ from: 'src/res', to: 'res' }
])),
...when(production, new UglifyJsPlugin({
sourceMap: true
}))
]
});
นี่คือภาพหน้าจอจากผู้ตรวจสอบของฉัน: ภาพหน้าจอของตัวตรวจสอบ
webpack.config.jsเพื่อดูการกำหนดค่า? นอกจากนี้ จะเป็นประโยชน์หากคุณสามารถแบ่งปันข้อผิดพลาดที่คุณได้รับได้เช่นกัน - person Ray schedule 30.04.2018webpackเริ่มต้น คุณช่วยบอกฉันเพิ่มเติมเกี่ยวกับโครงสร้างไดเร็กทอรีของคุณได้ไหม? โฟลเดอร์distอยู่ที่ไหน?, ไฟล์index.html? และส่วนheadจากไฟล์ html ของคุณเพื่อตรวจสอบว่าไฟล์เหล่านั้นมีการอ้างอิงหรือไม่ - person Ray schedule 30.04.2018app.[chunk hash].bundle.js&vendor.[chunk hash].bundle.jsมีการอ้างอิงอย่างถูกต้องจากตำแหน่งที่คุณโหลดไว้ - person Ray schedule 30.04.2018