Question

我试图通过webpack文件加载器输出所有图像文件，webpack忽略了所有图像。顺便说一句，我在我的角应用程序中将html文件导入为部分。

我的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 partials中更新。但是webpack将html渲染为与原始文件相同，并且不会将文件复制到dist / images文件夹。

请帮助..我被问题困扰了将近2天。

Answer 1

尝试使用如下的url-loader而不是file-loader，

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

Webpack文件加载器不会复制文件和文件。不更新URL

1 个答案: