वेबपैक, एकाधिक प्रविष्टि अंक सास और जेएस

Question

नीचे मेरी वेबपैक कॉन्फ़िगरेशन है। फिलहाल फ़ाइल लोड इस प्रवेश बिंदु main.js

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

मैं सार्वजनिक/js फ़ाइलों में दोनों फ़ाइलों को प्राप्त कर सकते हैं, लेकिन मैं सीएसएस और अपने स्वयं के फ़ोल्डर में js प्राप्त करना चाहते हैं। क्या यह संभव है?

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

मुझे इसी तरह की ज़रूरत थी, यह सुनिश्चित नहीं है कि यह करने का सही तरीका है लेकिन यह मेरे लिए काम करता है।

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', 
     }), 
     // ... 
    ] 
    // ... 
} 

आप:

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

Answer 2

हाँ, आप ऐसा कर सकते हैं, यहां एक उदाहरण है कि आप अपने js फ़ाइलों में सास फ़ाइलें आयात करने की आवश्यकता नहीं है है ./assets/bundles/main.min.js और ./assets/bundles/main.min.css के साथ समाप्त होना चाहिए। आपको स्पष्ट रूप से जेएस नियम जोड़ना होगा।

Answer 3

हम कई प्रवेश द्वारों और आउटपुट है और उन्हें इस तरह परिभाषित करते हैं:

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 प्रवेश की कुंजी पढ़ता है और उन्हें उत्पादन फ़ाइल नाम में [name] टैग में बदल देता है। See documentation for "output filename"