webpackで複数あるjsとcssのファイルをディレクトリ構造をそのままに、index.jsとindex.cssとして分離出力したいのですが、
index.scssファイルをindex.cssとして出力する際に、どうしてもindex.scssというファイル名で出力されてしまいます。
どのようにすれば拡張子を変更して出力することができるのでしょうか?
下記がwebpackファイルになります。
require('babel-polyfill'); var path = require('path'); var webpack = require('webpack'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); var autoprefixer = require('autoprefixer'); var path = require('path'); var glob = require('glob'); // js const js_BasePath = path.resolve(__dirname, '../src/js/'); const js_targets = glob.sync(`${js_BasePath}/**/index.js`); const js_entries = {}; js_targets.forEach(value => { const js_re = new RegExp(`${js_BasePath}/`); const js_key = value.replace(js_re, ''); js_entries[js_key] = value; }); // css const css_BasePath = path.resolve(__dirname, '../src/style/'); const css_targets = glob.sync(`${css_BasePath}/**/index.scss`); const css_entries = {}; css_targets.forEach(value => { const css_re = new RegExp(`${css_BasePath}/`); const css_key = value.replace(css_re, ''); console.log(value); css_entries[css_key] = value; }); console.log(css_entries); module.exports = [{ devtool: 'inline-source-map', context: __dirname, entry: js_entries, output: { path: path.join(__dirname, '../dist/js'), filename: '[name]' }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: 'babel-loader' }, { test: /\.vue$/, use: 'vue-loader' }, { test: /\.(jpg|png|gif)$/, exclude: /node_modules/, use: ['file-loader', 'url-loader'] } ] }, resolve: { extensions: ['*', '.js', '.vue'] }, plugins: [ new webpack.LoaderOptionsPlugin({ options: { postcss: [autoprefixer({ browsers: ['> 1%'] })], } }) ] },{ entry: css_entries, output: { path: path.join(__dirname, '../dist/style'), filename: '[name]' }, module: { rules: [ { test: /\.(scss|css)$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: [ 'css-loader?modules&importLoaders=1&localIdentName=[local]___[hash:base64:5]!postcss-loader', 'sass-loader' ] }) } ] }, resolve: { extensions: ['*', '.css', '.scss'] }, plugins: [ new ExtractTextPlugin({ filename: '[name]', ignoreOrder: true, allChunks: true }), new webpack.LoaderOptionsPlugin({ options: { postcss: [autoprefixer({ browsers: ['> 1%'] })], } }) ] }];
あなたの回答
tips
プレビュー