2017-03-04 10 views
0

webpackファイルローダーですべての画像ファイルを出力しようとしていますが、webpackはすべての画像を無視しています。ちなみに、私は角のアプリで部分的にhtmlファイルをインポートしています。Webpackファイルローダーがファイルをコピーしておらず、URLを更新していません

私はすべてのHTMLパーシャルに

//importing template 
    import toolbar from '../views/toolbar.html'; 

    angular 
    .module('se-branding', ['ngMaterial',]) 
    .config(['$stateProvider', function ($stateProvider) { 
     $stateProvider.state({ 
      name: 'toolbars', 
      url: '/toolbars', 
      template: toolbar // passing imported template for a state 
     }) 
    }]) 

マイテンプレートファイルをインポートファイルローダー

const path = require('path'); 
const webpack = require('webpack'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const CopyWebpackPlugin = require('copy-webpack-plugin'); 
const ExtractTextPlugin = require("extract-text-webpack-plugin"); 

const extractCSS = new ExtractTextPlugin('styles/vendor.[hash].css'); 
const extractLESS = new ExtractTextPlugin('styles/app.[hash].css'); 


module.exports = { 
    entry: { 
    app: './app/scripts/app.js', 
    webui: './app/component/scripts/main.js' 
    }, 
    output: { 
    // Absolute output directory 
    path: path.join(__dirname, 'dist'), 

    // Output path from the view of the page 
    // Uses webpack-dev-server in development 
    publicPath: '/dist', 

    // Filename for entry points 
    // Only adds hash in build mode 
    filename: 'js/[name].[hash].js', 

    // Filename for non-entry points 
    // Only adds hash in build mode 
    chunkFilename: 'js/[name].[hash].js' 
    }, 
    plugins: [ 
    new HtmlWebpackPlugin({ 
     title: 'Webpack Starter Angular - kitconcept', 
     template: 'app/index.html', 
     minify: { 
     collapseWhitespace: true, 
     removeComments: true, 
     removeRedundantAttributes: true, 
     removeScriptTypeAttributes: true, 
     removeStyleLinkTypeAttributes: true 
     } 
    }), 
    extractCSS, 
    extractLESS 
    ], 
    module: { 
    loaders: [ 

     { 
     test: /\.less$/, 
     loader: extractLESS.extract({ 
      use: [{ 
      loader: "css-loader" 
      }, { 
      loader: "less-loader" 
      }], 
      // use style-loader in development 
      fallback: "style-loader" 
     }) 
     }, 
     { 
     test: /\.css/, 
     loader: extractCSS.extract({ 
      use: [{ 
      loader: "css-loader" 
      }, { 
      loader: "less-loader" 
      }], 
      // use style-loader in development 
      fallback: "style-loader" 
     }) 
     }, 
     {test: /\.html$/, loader: 'html-loader'}, 
     // inline base64 URLs for <=8k images, direct URLs for the rest 
     //{test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}, 
     // helps to load bootstrap's css. 
     { 
     test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, 
     loader: 'url-loader?limit=10000&minetype=application/font-woff&name=fonts/[name].[ext]' 
     }, 
     { 
     test: /\.woff2$/, 
     loader: 'url-loader?limit=10000&minetype=application/font-woff&name=fonts/[name].[ext]' 
     }, 
     { 
     test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, 
     loader: 'url-loader?limit=10000&minetype=application/octet-stream&name=fonts/[name].[ext]' 
     }, 
     { 
     test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, 
     loader: 'file-loader?name=fonts/[name].[ext]' 
     }, 
     { 
     test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, 
     loader: 'url-loader?limit=10000&minetype=image/svg+xml&name=fonts/[name].[ext]' 
     }, 
     { 
     test: /\.(png|jpg|jpeg|gif|svg)$/, 
     loader: 'file-loader?limit=1024&name=images/[name].[ext]' 
     } 
    ] 
    }, 
    resolve: { 
    modules: [path.resolve(__dirname, "src"), "node_modules", "bower_components", "bower_components/webui", "app/component/"] 
    }, 
    devtool: 'eval-source-map' 
}; 

私の主なファイルと画像のための私のWebPACKのセットアップは

<md-icon md-svg-icon="component/images/icons/16px/se_user.svg"></md-icon> 

を下回っている私コンポーネント/ imagesからdist/imagesにファイルをコピーしようとしていますが、同じものをhtmlの部分で更新する必要があります。しかし、webpackはhtmlを元のファイルと同じようにレンダリングしており、ファイルをdist/imagesフォルダにコピーしません。

助けてください。私はほぼ2日間問題で立ち往生しています。

答えて

0

は、そのが機能していない...いや

{ 
      test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, 
      loader: 'url-loader?limit=10000' 
    }, 
    { 
     test: /\.(png|jpg|jpeg|gif|svg)$/, 
      loader: 'url-loader?limit=1024' 
    } 
+0

、代わりにファイル・ローダーの以下のようなURLローダを使用してみてください。 –

+0

ウェブパック設定全体を共有できますか? – Abhishek

+0

ウェブパック全体の設定が質問自体に反映されました。 –

関連する問題