Webpack文件加載器不復制文件並且不更新URL

Question

我試圖通過webpack文件加載器輸出所有圖像文件，webpack忽略所有圖像。順便說一下，我在我的角度應用程序中導入html文件作爲partials。

我的WebPack設置與文件裝載機

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' 
}; 

我的主要文件，其中我導入所有的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 
     }) 
    }]) 

我的模板文件中的圖像低於

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

我我試圖將文件從組件/圖像複製到dist/images，同樣應該在html par中進行更新tials。但是webpack將html與原始文件一樣渲染，並且不會將文件複製到dist/images文件夾。

請幫助..我堅持與近2天的問題。

Answer 1

嘗試使用URL裝載機像下面而不是文件裝載機，

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