deezus blog

.Net Core、Typescriptを中心に技術的ノウハウを公開しています

typescript+webpackでelectronアプリを開発する際の注意点

webpackでビルドする際__dirnameが展開されてしまう為、ビルドしたjsでNot allowed to load local resourceというエラーが発生します
具体的には下記コードの__dirnameがwebpack.config.jsを基準とした__dirnameに置換されてしまう為、index.htmlが読み込めません

let mainWindow = new BrowserWindow({width: 800, height: 600});
mainWindow.loadURL('file://' + \__dirname + '/index.html');

これを回避するために、webpack.config.jsに下記を追加します

node: {
    __dirname: false
}

全体としては下記のようになります

module.exports = [
    {
        entry: './src/app.ts',
        output: {
            filename: './dist/app.js'
        },
        resolve: {
            extensions: ['.ts', '.tsx', '.js']
        },
        plugins: [
             new webpack.optimize.UglifyJsPlugin()
        ],
        module: {
            loaders: [
                {
                    test: /\.ts$/,
                    loader: 'awesome-typescript-loader'
                }
            ]
        },
        node: {
            __dirname: false
        },
        target: "atom"
    }]