Webpack, несколько точек входа Sass и JS

Ниже мой конфиг webpack. В настоящий момент файл загружает эту точку входа main.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(),

    ]

};

webpack javascript sass entry-point
person LeBlaireau    schedule 15.03.2017    source источник

Ответы (6)


arrow_upward
25
arrow_downward

Да, вы можете это сделать, вот пример, который не требует от вас импорта файлов sass в ваши файлы 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',
        }),
        // ...
    ]
    // ...
}

У вас должно получиться ./assets/bundles/main.min.js и ./assets/bundles/main.min.css. Очевидно, вам придется добавить правила js.

person Ivan    schedule 15.03.2017

arrow_upward
23
arrow_downward

У нас есть несколько точек входа и выхода, и мы определяем их следующим образом:

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] в выходном имени файла. См. документацию для "выходного файла"

person olore    schedule 21.06.2017
comment
Это работает, но это всего лишь хитрость для создания scss расширения файла. Содержимое main.min.scss будет по-прежнему на Javascript. - person Kamafeather; 05.05.2021

arrow_upward
3
arrow_downward

У меня была аналогичная потребность, я не уверен, что это правильный способ, но он работает для меня.

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

Затем для css:

plugins: [
    new ExtractTextPlugin("../css/[name].css")
],
person Paul Kaspriskie    schedule 15.03.2017
comment
да, я подумал об этом, кажется немного неправильным, что нужно проложить путь обратно по дереву, чтобы затем записать файл. Спасибо за ответ. Я оставлю вопрос открытым и опубликую, если найду что-нибудь еще. - person LeBlaireau; 15.03.2017
comment
Да, я знаю, что это своего рода взлом, но я действительно не мог найти более чистый / правильный способ сделать это, ха. Мне будет интересно посмотреть, какие другие решения появятся, потому что это то, что я хотел обновить в своих проектах webpack, ха. - person Paul Kaspriskie; 15.03.2017

arrow_upward
3
arrow_downward

ExtractTextPlugin устарел для CSS, и рекомендуется использовать MiniCssExtractPlugin.

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: ['index.js', 'index.css'],
  module: {
    rules: [{
      test: /\.(scss|css)$/,
      use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
    }]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name]-[hash].css'
    })
  ]
};

Вам также нужно будет установить npm i node-sass отдельно.

person Pier    schedule 19.05.2020

arrow_upward
1
arrow_downward

У меня есть админ-панель (panel.js и panel.scss) и страницы с контентом без прав администратора (index.js и main.scss), я хочу скомпилировать в 2 файла css и 2 файла js. Вот что я сделал:

module.exports = {
    entry: {
        'pages': ['./src/js/index.js', './src/css/main.scss'],
        'admin': ['./src/js/admin-index.js', './src/css/admin.scss']
    },

 output: {
            filename: "./js/[name]-bundle.js",
            path: path.resolve(__dirname, "dist"), 
        },

plugins: [
 new MiniCssExtractPlugin(
            {
                filename: "./css/[name].css"
            }
        ),
   ]

}

Результат был таким:

dist
    css
        admin.css
        pages.css
    js
        admin-bundle.js
        pages-bundle.js

Работает очень хорошо, надеюсь, это поможет

person Sophie cai    schedule 28.07.2020

arrow_upward
0
arrow_downward

mini-css-extract-plugin может исправить это с помощью webpack 5

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: ['./src/js/index.js', './src/scss/index.scss'],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }, {
        test: /\.(sa|sc|c)ss$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'sass-loader',
        ],
      },
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name]-[hash].css'
    }),
  ]
};
person Mo.    schedule 23.12.2020