Happy to share the webpack config file that we use for our TypeScript project. Note that we do use both TypeScript and Vue.js. Your configuration file will necessarily be different.
var webpack = require('webpack');
// Based on the basic setup outlined here:
// https://webpack.js.org/guides/webpack-and-typescript/#basic-setup
module.exports = {
entry: './dom_html/src/index.ts',
output: {
filename: 'bundle.js',
path: __dirname + '/dist'
},
target: "node-webkit",
// Use 'node' to disable auto-polyfilled node libraries when targeting 'web'.
// node: {
// os: false,
// path: false
// },
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
esModule: true
}
// See this page for more:
// https://vue-loader.vuejs.org/en/configurations/advanced.html
},
{
enforce: 'pre',
test: /\.js$/,
loader: "source-map-loader"
},
{
enforce: 'pre',
test: /\.ts?$/,
use: "source-map-loader"
},
{
test: /\.ts?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
appendTsSuffixTo:[/\.vue$/]
}
}
]
},
resolve: {
extensions: [".ts", ".js", ".vue"]
},
devtool: 'source-map',
// devtool: 'inline-source-map', // This breaks in CEP.
// plugins: [
// // From: https://vuejs.org/v2/guide/installation.html#Development-vs-Production-Mode
// new webpack.DefinePlugin({
// 'process.env': {
// NODE_ENV: JSON.stringify('production')
// }
// })
// ]
};
Some important points about the above:
- Line 11: Please note that the target is set to "node-webkit". This provides information about the environment within which the content will run. This setting is specifically for environments like Adobe CEP which rely upon nw.js. See the "Proper Webpack Configuration" section in this post for more.
- Lines 12-16: These lines were used prior to discovering the node-webkit target setting. They are unnecessary now, but remain as a hint/reference.
- Lines 19-27; anything with "Vue": These are additions specific to the Vue.js framework. Vue-specific content should be removed when using any other setup (React, Angular, Ember, Inferno, VanillaJS, or etc​).
- Line 52: In our experience, setting "devtool: 'inline-source-map'" breaks in CEP. Give it a shot, if you like, but we have found that "devtool: 'source-map'" works just fine.
In general you're probably going to want to follow the Angluar-specific instructions first and then make some Adobe CEP-specific modifications to get it running correctly. Very likely these are mostly outlined in bullets #1 and #3 above, though.
Hope this helps!
5
Replies
AdChoices