優化所需文件夾內的圖像

我正在使用webpack捆綁。我正在使用reactjs和django。我想要Django使用的靜態文件和reactjs是分開的。我可以縮小圖像，但縮小的圖像保存到輸出文件捆綁的文件夾中。我希望將所有縮小的圖像保存在前端 - >資產文件夾中。我怎麼能這樣做？優化所需文件夾內的圖像

項目結構看起來像下面

應用 - 它在那裏的靜態文件保存爲Django的目錄。 Webpack將反應文件捆綁到app.js中，並放置在此處，因爲Django模板需要它在其模板中呈現爲<script src='app/bundle/js/app.js'></script>。

前端 - 這是一個所有反應文件所在的目錄。我想讓這些圖像位於這個目錄（assets/images /）中。將在reactjs中使用的圖像。

我該怎麼做呢？

我的WebPack現在這種方式配置

const path = require("path"); 
if(!process.env.NODE_ENV) { 
    process.env.NODE_ENV = 'development'; 
} 

module.exports = { 
    entry: [ 
    './src/index.js' 
    ], 
    output: { 
    path: path.join("../app/static/build/", "js"), 
    filename: "app.js", 
    publicPath: "../app/static/build/" 
    }, 
    devtoo: 'source-map', 
    debug: true, 
    module: { 
    loaders: [{ 
     exclude: /node_modules/, 
     loader: 'babel', 
     query: { 
     presets: ['react', 'es2015', 'stage-1'] 
     } 
    }, 
    {test: /\.(jpe?g|png|gif|svg)$/i, loader: "file-loader?name=images/[name].[ext]"}, 
    ] 
    }, 
    resolve: { 
    extensions: ['', '.js', '.jsx'] 
    }, 
    devServer: { 
    historyApiFallback: true, 
    contentBase: './' 
    } 
};

來源

2016-11-25 Serenity

您可以通過使用outputPath和publicPath查詢名稱參數指定自定義輸出和公共路徑：

loader: "file-loader?name=[name].[ext]&publicPath=assets/foo/&outputPath=app/images/"

但此功能不可published to NPM呢。所以不幸的是，你需要等待它發佈或克隆，並使用這個裝載機從github repo

來源

2016-11-25 07:49:37

優化所需文件夾內的圖像

回答

相關問題