このnode_moduleの.htmlアセットをwebpackに含めるにはどうすればいいですか？

Question

私はパッケージelectron-notificationsを使用しており、assetsフォルダの.htmlと.cssファイルに依存しています。この資産フォルダはwebpack（1.14.0）には含まれていません。

私はエントリーポイントとしてモジュールを追加すべきではないことを知っています。私はコード分割と呼ばれるコンセプトに遭遇しましたが、それがどう機能しているか、それがさらに検討する必要があるかどうかは不明です。アドバイスをいただければ幸いです。

webpack.config.production.js

import path from 'path'; 
import webpack from 'webpack'; 
import validate from 'webpack-validator'; 
import ExtractTextPlugin from 'extract-text-webpack-plugin'; 
import merge from 'webpack-merge'; 
import HtmlWebpackPlugin from 'html-webpack-plugin'; 
import BabiliPlugin from 'babili-webpack-plugin'; 
import baseConfig from './webpack.config.base'; 

export default validate(merge(baseConfig, { 

    devtool: 'inline-source-map', 

    entry: [ 
    'babel-polyfill', 
    './app/index' 
    ], 

    output: { 
    path: path.join(__dirname, 'app/dist'), 
    publicPath: '../dist/' 
    }, 

    module: { 
    loaders: [ 

     // Extract all .global.css to style.css as is 
     { 
     test: /\.global\.css$/, 
     // loaders: [ 
     loader: ExtractTextPlugin.extract(
      'style-loader', 
      'css-loader?sourceMap' 
     ) 
     // ] 
     }, 

     // Pipe other styles through css modules and append to style.css 
     { 
     test: /^((?!\.global).)*\.css$/, 
     // loaders: [ 
     loader: ExtractTextPlugin.extract(
      'style-loader', 
      'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' 
     ) 
     }, 

     // Fonts 
     { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' }, 
     { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff' }, 
     { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream' }, 
     { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file' }, 
     { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml' }, 
     // Images 
     { 
     test: /\.(?:ico|gif|png|jpg|jpeg|webp)$/, 
     loader: 'url-loader' 
     } 
    ] 
    }, 

    plugins: [ 
    // https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin 
    // https://github.com/webpack/webpack/issues/864 
    new webpack.optimize.OccurrenceOrderPlugin(), 

    // NODE_ENV should be production so that modules do not perform certain development checks 
    new webpack.DefinePlugin({ 
     'process.env.NODE_ENV': JSON.stringify('production') 
    }), 
    new BabiliPlugin(), 
    new ExtractTextPlugin('style.css', { allChunks: true }), 

    new HtmlWebpackPlugin({ 
     filename: '../app.html', 
     template: 'app/app.html', 
     inject: false 
    }) 
    ], 

    // https://github.com/chentsulin/webpack-target-electron-renderer#how-this-module-works 
    target: 'electron-renderer' 
})); 

Answer 1

あなたがパッケージのCSSはWebPACKので認識されるようにすることを望む場合は、あなただけのincludeとして、スタイルの（CSSの）ローダーブロックに追加"test"と "loader"とともに属性を指定します。インクルード属性では、node_modules/electron_notificationパスを指します。

シングルページアプリケーションが独自のHTMLを持っているので、必要に応じてそのクラス名を複製してください。そのパッケージのHTMLは含まれていなくてもかまいません。しかし、あなたがそれをする必要があるかどうかは疑問です。