如何在webpack中包含这个node_module的.html资源？

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的认可，你只需将它添加到样式的（CSS的）加载模块，为include属性以及“测试”和“加载器”。在include属性中将其指向node_modules/electron_notification路径。

无需包含该包的HTML，因为您的单页应用程序具有自己的HTML，如果需要的话尝试在其中复制类名称。但我怀疑你是否需要这样做。