web-dev-qa-db-ja.com

Webpack、複数のエントリポイントSassおよびJS

以下は私のwebpackの設定です。現時点では、ファイルはこのmain.jsエントリポイントをロードします

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

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

    ]

};
javascriptsasswebpackentry-point
22
LeBlaireau

はい、これを行うことができます。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ルールを追加する必要があります。

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]タグに置き換えます。 「出力ファイル名」のドキュメントを参照

18
olore

同様のニーズがありましたが、これが正しい方法であるかどうかはわかりませんが、うまくいきます。

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

次に、CSSの場合：

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