2017-02-08 1 views
1

Я требует кучи .css файлов из моих НПХ модулей в моем файле main.js, который является точкой входа в моем WebPack конфигурации, как вы можете увидеть здесь:Webpack 2: как проверить файл, но не скомпилировать его?

"use strict"; 
const ExtractTextPlugin = require("extract-text-webpack-plugin"); 

var webpack = require("webpack"); 

module.exports = { 
    entry: { 
     dashboard: './js/main.js', 
     vendor: ["fixed-data-table","react","react-dom","jquery", "bootstrap"], 
    }, 
    output: { path: "../resources/public", filename: 'bundle.js' }, 

    plugins: [ 
     new webpack.optimize.CommonsChunkPlugin({name: "vendor", filename: "static/vendor.bundle.js"}), 
     new ExtractTextPlugin("[name].css"), 
     new webpack.ProvidePlugin({ 
      $: "jquery", 
      jQuery: "jquery" 
     }), 
    ], 

    module: { 
     loaders: [ 
      { 
       test: /.js?$/, 
       loader: 'babel-loader', 
       exclude: /node_modules/, 
       query: { 
        presets: ['es2015', 'react', 'stage-0'] 
       } 
      }, 
      { 
       test: /\.css$/, 
       loader: ExtractTextPlugin.extract({ fallback: 'style-loader', use: 'css-loader'}), 
      }, 
      { 
       test: /\.(jpe?g|png|gif|svg)$/i, 
       loaders: [ 
        'file-loader', 
       ], 
      }, 
      { 
       test: /\.(eot|svg|ttf|woff|woff2)$/, 
       loader: 'file-loader' 
      } 
     ] 
    }, 
}; 

Если я не испытываю для шрифтов и изображений я получаю ошибки, поскольку некоторые модули, например bootstrap.css, будут искать .png и различные шрифты.

Итак, я добавил загрузчики для тестирования изображений и шрифтов, которые теперь работают: он будет строить!

Однако он также обрабатывает и выводит кучу файлов .png, .woff2, .eot, .tff в ту же папку вывода, которую я не хочу.

«Грязное исправление» должно было бы сделать сценарий .sh, где я просто удаляю эти конкретные файлы после запуска webpack в терминале. Но я не хочу этого делать.

Как изменить конфигурацию webpack для проверки изображений и шрифтов, но не обрабатывать и выводить их в папку вывода?

ответ

0

«Грязная» решение просто выводить эти файлы в корзину, как например:

{ 
     test: /\.(jpe?g|png|gif|svg)$/i, 
     loaders: [ 
      'file-loader?hash=sha512&digest=hex&name=~/.local/share/Trash/[hash].[ext]', 
      'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false' 
     ], 
    }, 
    { 
     test: /\.(eot|svg|ttf|woff|woff2)$/, 
     loader: 'file-loader?name=~/.local/share/Trash/[name].[ext]' 
    } 

Это работает, но это, конечно, не должно быть сделано таким образом :)

0
{ test: /\.jpg$/, loader: "file-loader?name=assets/images/[hash].[name].[ext]"}, 
    { test: /\.png$/, loader: "file-loader?name=assets/images/[hash].[name].[ext]&mimetype=image/png"}, 
    { 
     test: /\.(html|hbs)$/, 
     loaders: ['handlebars-template-loader'] 
    }, 
    // Bootstrap 4 
    // { test: /bootstrap\/dist\/js\/umd\//, loader: 'imports?jQuery=jquery' }, 
    // Bootstrap 3 
    // { test: /bootstrap-sass\/assets\/javascripts\//, loader: 'imports?jQuery=jquery' }, 
    { 
     test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
     loader: 'url?name=assets/fonts/[hash].[name].[ext]&limit=10000', 
    }, 
    { test: /\.[ot]tf$/, loader: 'url?limit=65000&mimetype=application/octet-stream&name=assets/fonts/[name].[ext]' }, 
    { 
     test: /\.(eot|svg)(\?[\s\S]+)?$/, 
     loader: 'file?name=assets/fonts/[hash].[name].[ext]', 
    } 
+0

Может вам разрабатывать? Кажется, вы только что изменили назначение, а не фактическую обработку и вывод самих файлов? – cbll

+0

Я не понимаю, что вы имеете в виду. Вы хотите вывести активы в другую папку? –

+0

Нет, я не хочу выводить шрифты или изображения вообще. Мне просто нужен тест/загрузчик, чтобы не получить ошибки от связывания файлов .css, так как некоторые из файлов .css имеют зависимости, которые являются шрифтами/изображениями, но я их не хочу :) – cbll