Блог

Когда я запускаю webpack , он компилирует мои scss файлы и конвертирует небольшие файлы в base64 . Однако он также копирует большие изображения из моей /img папки в выходную папку. Как я могу предотвратить webpack это? Я хочу, webpack чтобы в папке изображений оставались ссылки на мои исходные изображения, а не копировать их в выходную папку.

webpack создает файлы, которые выглядят следующим образом (в выходной папке):

 5474fbe2d9c2987bc9345fb6cf66fd25.png
  

Вот мой конфигурационный файл webpack:

 module.exports = {
context: path.join(__dirname, "/www"),
entry: [
    "./src/base/style.scss",
],
output: {
    filename: "bundle.css",
    path: path.join(__dirname, "/www/dist")
},
devtool: "source-map",
resolve: {
    extensions: ["", ".scss"]
},
module: {
    loaders: [
        {
            test: /.(scss|sass)$/,
            loader: ExtractTextPlugin.extract('style-loader', 'css-loader', 'sass-loader', 'postcss-loader', 'raw-loader'),
            exclude: /node_modules/
        },
        {
            test: /.(png|jpeg|jpg|gif|...)(?v=[0-9].[0-9].[0-9])?$/,
            loader: 'url-loader?limit=2000'
        }
    ],
    preLoaders: [
        { test: /.(scss)$/, loader: "source-map-loader" }
    ]
},
postcss: function () {
    return [autoprefixer, precss];
},
sassLoader: {
    includePaths: [path.join(__dirname, 'www/src')]
},
plugins: [
    new webpack.optimize.DedupePlugin(),
    new ExtractTextPlugin('bundle.css')
]
}
  

установите ограничение на 1 и задайте имя

 {
    test: /.(png|jpeg|jpg|gif|...)(?v=[0-9].[0-9].[0-9])?$/,
    loader: 'url-loader',
    query: {
      limit: 1, 
      name: 'img/[name].[ext]?[hash:5]', 
    }
}