web-dev-qa-db-fra.com

Webpack, plusieurs points d'entrée Sass et JS

Ci-dessous ma configuration webpack. Au moment où le fichier charge ce point d'entrée main.js

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

Je peux obtenir les deux fichiers dans les fichiers publics/js mais je voudrais obtenir les css et js dans leur propre dossier. Est-ce possible?

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(),

    ]

};
javascriptsasswebpackentry-point
22
LeBlaireau

Oui, vous pouvez le faire, voici un exemple qui ne vous oblige pas à importer des fichiers sass dans vos fichiers 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',
        }),
        // ...
    ]
    // ...
}

Vous devriez vous retrouver avec ./assets/bundles/main.min.js et ./assets/bundles/main.min.css. Vous devrez évidemment ajouter des règles js.

24
Ivan

Nous avons plusieurs points d'entrée et sorties et les définissons comme ceci:

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 lit les clés de l'entrée et les remplace dans le [name] tag dans le nom du fichier de sortie. Voir la documentation pour "nom du fichier de sortie"

18
olore

J'avais un besoin similaire, je ne sais pas si c'est la bonne façon de le faire, mais cela fonctionne pour moi.

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

Alors pour le css:

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