文件装载机的WebPack不移动src文件夹的图像文件到dist夹

Question

{ 
     test: /\.(png|jpg|gif)$/, 
     loader: 'file-loader?name=img/img-[hash:6].[ext]', 
     }, 

我加入此配置成webpack.config.js利用由添加上述规则file-loader成

module: { 
    rules: [ 

部分，但没有图像的文件已移至dist/文件夹，即使我将图像文件放入src/images/。是否有我错过了需要添加到webpack配置？

我下面从https://julienrenaux.fr/2015/03/30/introduction-to-webpack-with-practical-examples/

的例子顺便说一句，我使用的WebPack 2 ...是有不同的方式，以现在的配置文件加载器？

这里是整个的WebPack配置文件

const { resolve } = require('path'); 

const webpack = require('webpack'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 
const CopyWebpackPlugin = require('copy-webpack-plugin'); 
const OpenBrowserPlugin = require('open-browser-webpack-plugin'); 

const config = { 
    devtool: 'cheap-module-eval-source-map', 

    entry: [ 
    'react-hot-loader/patch', 
    'webpack-dev-server/client?http://localhost:8080', 
    'webpack/hot/only-dev-server', 
    './main.js', 
    './assets/scss/main.scss', 
    ], 

    output: { 
    filename: 'bundle.js', 
    path: resolve(__dirname, 'dist'), 
    publicPath: '/', 
    }, 

    context: resolve(__dirname, 'app'), 

    devServer: { 
    hot: true, 
    contentBase: resolve(__dirname, 'dist'), 
    publicPath: '/', 
    }, 

    module: { 
    rules: [ 
     { 
     test: /\.js$/, 
     loaders: [ 
      'babel-loader', 
     ], 
     exclude: /node_modules/, 
     }, 
     { 
     test: /\.scss$/, 
     exclude: /node_modules/, 
     use: ExtractTextPlugin.extract({ 
      fallback: 'style-loader', 
      use: [ 
      'css-loader', 
      { 
       loader: 'sass-loader', 
       query: { 
       sourceMap: false, 
       }, 
      }, 
      ], 
     }), 
     }, 
     { test: /\.(png|jpg)$/, use: 'url-loader?limit=15000' }, 
     { test: /\.eot(\?v=\d+.\d+.\d+)?$/, use: 'file-loader' }, 
     { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: 'url-loader?limit=10000&mimetype=application/font-woff' }, 
     { test: /\.[ot]tf(\?v=\d+.\d+.\d+)?$/, use: 'url-loader?limit=10000&mimetype=application/octet-stream' }, 
     { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, use: 'url-loader?limit=10000&mimetype=image/svg+xml' }, 
     { 
     test: /\.(png|jpg|gif)$/, 
     loader: 'file-loader?name=img/img-[hash:6].[ext]', 
     }, 
    ], 
    }, 

    plugins: [ 
    new ExtractTextPlugin({ filename: 'style.css', disable: false, allChunks: true }), 
    new CopyWebpackPlugin([{ from: 'vendors', to: 'vendors' }]), 
    new OpenBrowserPlugin({ url: 'http://localhost:8080' }), 
    new webpack.HotModuleReplacementPlugin(), 
    ], 
}; 

module.exports = config; 

Answer 1

它说，在这个例子中你以下几点：

现在，您可以要求使用require('./src/image_big.jpg')任何图像文件;

如果没有地方导入图像，将的WebPack不能照搬他们，因为它只适用的file-loader它看到进口和匹配您的规则。您还可以url它们导入萨斯例如：

background-image: url('./src/image.jpg'); 

也有.png和.jpg两个规则：

{ test: /\.(png|jpg)$/, use: 'url-loader?limit=15000' }, 
{ 
    test: /\.(png|jpg|gif)$/, 
    loader: 'file-loader?name=img/img-[hash:6].[ext]', 
}, 

从中选择一个。因为现在它将同时应用，但其中只有其中一个被真正使用，所以当图像大于15kb时，最终得到两个图像，因为当文件大于配置的限制时，url-loader将回退到file-loader。

Answer 2

使用下面的代码片断要求src/images/下的所有文件（或任何您存放图片）内main.js：

// load assets 
function requireAll(r) { r.keys().forEach(r); } 
requireAll(require.context('src/images/', true)); 

这将使的WebPack处理位于此文件夹内的所有文件。

Answer 3

参考：https://angular.io/docs/ts/latest/guide/webpack.html

我建议您尝试上面提到的指南。不过请注意，你需要运行下面得到它的所有工作：

npm install --save-dev karma-jasmine-html-reporter 

关于你的问题，在上面的例子中引导的图像通过一个<img>标签通过HTML文件中引用。这个<img>引用被webpack拾取，并且图像文件被放置在已经在输出“dist /”文件夹中创建的资产目录中：

“app.component。HTML“：

<main> 
    <h1>Hello from Angular App with Webpack</h1> 
    <img src="../assets/images/angular.png"> 
</main> 

这是他们的装载机自己的WebPack配置文件：

”webpack.conf.js“：

var webpack = require('webpack'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var helpers = require('./helpers'); 

module.exports = { 
    entry: { 
     'polyfills': './src/polyfills.ts', 
     'vendor': './src/vendor.ts', 
     'app': './src/main.ts' 
    }, 

    resolve: { 
     extensions: ['.ts', '.js'] 
    }, 

    module: { 
     rules: [ 
      { 
       test: /\.ts$/, 
       loaders: [ 
        { 
         loader: 'awesome-typescript-loader', 
         options: { configFileName: helpers.root('src', 'tsconfig.json') } 
        } , 'angular2-template-loader' 
       ] 
      }, 
      { 
       test: /\.html$/, 
       loader: 'html-loader' 
      }, 
      { 
       test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, 
       loader: 'file-loader?name=assets/[name].[hash].[ext]' 
      }, 
      { 
       test: /\.css$/, 
       exclude: helpers.root('src', 'app'), 
       loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader?sourceMap' }) 
      }, 
      { 
       test: /\.css$/, 
       include: helpers.root('src', 'app'), 
       loader: 'raw-loader' 
      } 
     ] 
    }, 

    plugins: [ 
     // Workaround for angular/angular#11580 
     new webpack.ContextReplacementPlugin(
      // The (\\|\/) piece accounts for path separators in *nix and Windows 
      /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/, 
      helpers.root('./src'), // location of your src 
      {} // a map of your routes 
     ), 

     new webpack.optimize.CommonsChunkPlugin({ 
      name: ['app', 'vendor', 'polyfills'] 
     }), 

     new HtmlWebpackPlugin({ 
      template: 'src/index.html' 
     }) 
    ] 
};