2015-09-08 17 views
8

Webpack è lo strumento di cui ho bisogno per passare diversi file in meno in un file CSS minificato?
se è così, non sono sicuro di cosa sto facendo male nel codice qui sotto?
C'è un modo per l'output su percorsi di file diversi, in questo momento il mio file js viene emesso a './assets/javascripts/bundle/', vorrei che il mio file css emetta su './assets/stylesheets/bundle/', come farei?webpack build meno file output one css minify file

Aggiornamento
Ho fatto una prova e posso costruire la mia meno file in un unico file css, ma ancora non riesce a trovare il modo di impostare percorsi multipli per la cartella di output, ora devo commentare la voce di js parte e cambiare percorso di uscita ...

webpack config

var path = require('path'); 
var webpack = require("webpack"); 
var ExtractTextPlugin = require("extract-text-webpack-plugin"); 

module.exports = { 
    entry: { 
    'MediaIndex':['./assets/javascripts/Media/Index/Base.js'], 
    // stylesheets 
    'MediaIndexStyleSheet':['./assets/stylesheets/Media/Index/Base.js'] 
    }, 
    output: { 
    path: './assets/javascripts/bundle/', 
    filename: '[name].js' 
    }, 
    resolve: { 
    alias: { 
     jquery: path.join(__dirname, "assets/javascripts/lib/jquery-1.11.1.min.js"), 
     "jquery-ui": path.join(__dirname, "assets/javascripts/lib/jquery-ui.min.js"), 
    } 
    }, 
    plugins: [ 
    new webpack.ProvidePlugin({ 
     jQuery: "jquery", 
     $: "jquery" 
    }), 
    new ExtractTextPlugin("[name].css") 
    ], 
    module: { 
    loaders: [ 
     { 
     test: /\.css$/, 
     loader: ExtractTextPlugin.extract("style-loader", "css-loader") 
     }, 
     { 
     test: /\.less$/, 
     loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader") 
     } 
    ] 
    }, 
}; 

beni/fogli di stile/media/Indice/Base.js

require('../../../Global/Config.less'); 
require('../../../Global/Fp.less'); 
require('../../../Global/Urb.less'); 
require('../../../Global/Ad1.less'); 
require('./Nav0.less'); 
require('./Index.less'); 
require('./Content.less'); 

Config.less

@color: 'red'; 

Index.less

body { 
    background-color: @{color}; 
} 

risposta

5

ci sei quasi. Come hai già fatto, puoi ottenere tutto il tuo stile in un file css usando ExtractTextPlugin. Per inserire js e css in una directory diversa, puoi semplicemente definire un percorso in ExtractTextPlugin o output.filename relativo al tuo output.path. Ad esempio:

output: { 
    path: './assets', 
    filename: './javascripts/bundle/[name].js' 
}, 
plugins: [ 
    new ExtractTextPlugin("./stylesheets/bundle/[name].css") 
] 
+0

Grazie per la risposta, questo lavoro !! Mi chiedo se sia possibile impostare il nome del file css come il nome del file javascript, in questo momento devo aggiungere StyleSheet dopo il nome del file alla voce – user1775888

Problemi correlati