私は次のプロジェクトツリーを持っています
some-project
some-project.component.ts
some-project.html
index.ts
webpack.conf.js
another-project
another-project.component.ts
anpther-project.html
index.ts
webpack.conf.js
別のプロジェクトから webpack を実行していますが、一部のプロジェクトが別のプロジェクトにインポートされています。しかし、antoher-project の html-loader は some-project の html を認識しないようです
/some-project.html
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
この問題に対処するには?
ここに別のプロジェクトtsconfig.jsonの構成があります
{
"awesomeTypescriptLoaderOptions": {
"forkChecker": true,
"useWebpackText": true,
"transpileOnly": false
},
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"lib": [
"dom",
"es2015"
],
"types" : [
"jquery",
"jasmine",
"angular-mocks",
"angular-animate",
"node"
],
"typeRoots": [
"node_modules/@types",
"./node_modules",
"./typings/global.d.ts"
]
},
"files": [
"src/index.ts"
],
"exclude": [
"node_modules"
]
}
webpack構成
{
devtool: 'inline-source-map',
entry: sourcePath + '/index.ts',
output: {
path: __dirname,
filename: 'bundle.js'
},
externals: {
"angular": "angular"
},
module: {
rules: [{
test: /\.ts$/,
include: path.resolve('../../some-project/src'),
exclude: /node_modules/,
use: [
'awesome-typescript-loader'
]
},
{
test: /\.(html)$/,
include: path.resolve('./src'),
use: {
loader: 'html-loader',
options: {
minimize: true,
collapseWhitespace: true
}
}
}
]
},
resolve: {
extensions: ['.ts', '.js'],
modules: [
path.resolve('./node_modules'),
sourcePath
]
},
plugins:
[
new webpack.NamedModulesPlugin()
],
stats: {
colors: {
green: '\u001b[32m',
}
}
}