Webpack，多個入口點Sass和JS

下面是我的webpack配置。目前，該文件加載這個main.js切入點Webpack，多個入口點Sass和JS

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

我可以得到兩個文件在公共/ js文件，但我想獲得在自己的文件夾中的CSS和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(), 

    ] 

};

來源

2017-03-15 LeBlaireau

我也有類似的需求，不知道這是做的正確的方式，但它爲我工作。

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

那麼對於CSS：

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

來源

2017-03-15 15:31:15

是的我想過了，似乎有點不對，不得不協商你的方式備份樹，然後寫入文件。感謝您的回覆，如果我發現其他問題，我會保持這個問題的公開和帖子。 – LeBlaireau

是的，我知道這是一種黑客，但我真的找不到一個更清潔/正確的方式來做到這一點。我會有興趣看看還有哪些其他解決方案出現，因爲這是我一直想在我的webpack項目中進行改造的。 –

是的，你可以做到這一點，這裏不需要你導入你的js文件SASS文件的示例：

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

你應該以./assets/bundles/main.min.js和./assets/bundles/main.min.css結尾。你將不得不明顯添加js規則。

來源

2017-03-15 16:48:24 Ivan

我們有多個入口點和輸出，定義它們是這樣的：

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"

來源

2017-06-21 02:49:34 olore

Webpack，多個入口點Sass和JS

回答

相關問題