Webpack, çoklu giriş noktaları Sass ve JS

Question

Web paketim aşağıdadır. Şu anda dosya yükler bu ben kamu/js dosyalarında iki dosyayı alabilirsiniz ama kendi klasöründe css ve js almak istiyorum giriş noktasının

import './resources/assets/js/app.js'; 
import './resources/assets/sass/main.scss'; 

main.js. Mümkün mü?

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

module.exports = { 

    resolve: { 
    alias: { 
     'masonry': 'masonry-layout', 
     'isotope': 'isotope-layout' 
    } 
    }, 

    entry: './main.js', 
    devtool: 'source-map', 
    output: { 
     path: path.resolve(__dirname, './public'), 
     filename: 'bundle.js' 
    }, 

    module: { 
     rules: [ 

     { test: /\.js$/, 
       exclude: /node_modules/, 
       loader: "babel-loader?presets[]=es2015", 

      }, 

      { 
       test:/\.scss$/, 
       use: ExtractTextPlugin.extract({ 
        use: [{loader:'css-loader?sourceMap'}, {loader:'sass-loader', options: { 
        sourceMap: true 
       }}], 

       }) 
      }, 

      /*{ 
     test : /\.(png|jpg|svg)$/, 
     include : path.join(__dirname, '/dist/'), 
     loader : 'url-loader?limit=30000&name=images/[name].[ext]' 
    }, */ 

      { 
       test: /\.vue$/, 
     loader: 'vue-loader', 
     options: { 
      loaders: { 
      } 
      // other vue-loader options go here 
     } 
     }, 



     ] 
    }, 

    plugins: [ 

     //new webpack.optimize.UglifyJsPlugin(), 
     new ExtractTextPlugin('app.css'), 
     new WebpackNotifierPlugin(), 

    ] 

}; 

Answer 1

Benzer bir gereksinime sahiptim, bunun doğru yolu olup olmadığından emin değilim, ancak benim için çalışıyor. Sonra css için

output: { 
     path: path.join(__dirname, './public/js'), 
     filename:'bundle.js' 
    }, 

:

const config = { 
    entry: { 
     main: ['./assets/js/main.js', './assets/css/main.scss'], 
    }, 
    module: { 
     rules: [ 
      {test: /\.(css|scss)/, use: ExtractTextPlugin.extract(['css-loader', 'sass-loader'])} 
      // ... 
     ], 
    }, 
    output: { 
     path: './assets/bundles/', 
     filename: "[name].min.js", 
    }, 
    plugins: [ 
     new ExtractTextPlugin({ 
      filename: '[name].min.css', 
     }), 
     // ... 
    ] 
    // ... 
} 

You:

plugins: [ 
    new ExtractTextPlugin("../css/[name].css") 
], 

Answer 2

Evet bunu yapabilirsin, burada js dosyalarında küstahlık dosyalarını almak için gerektirmez bir örnek ./assets/bundles/main.min.js ve ./assets/bundles/main.min.css ile bitmelidir. Açıkça js kurallarını eklemeniz gerekecek.

Answer 3

Biz çoklu giriş noktalarını ve çıkışları var ve bu gibi onları tanımlayın:

entry: { 
    'js/main.min.js': './resources/assets/js/app.js', 
    'css/main.min.scss': './resources/assets/sass/main.scss' 
}, 
output: { 
    filename: path.resolve(__dirname, './public/assets/[name]') 
}, 

webpack giriş anahtarlarını okur ve çıkış dosya adında [name] etiketine değiştirir. See documentation for "output filename"