0

私のプロジェクトでは、React と NodeJS で Webpack を使用しています。bundle.jsandstyle.cssファイルを生成したい。現在、私は次のコードを持っています:

var webpack = require('webpack')
var ExtractTextPlugin = require('extract-text-webpack-plugin')

module.exports = {
  entry: './index.js',

  output: {
    path: 'public',
    filename: 'bundle.js',
    publicPath: ''
  },

  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015']
        }
      },
      { test: /\.scss$/, loader: ExtractTextPlugin.extract('css!sass') }
    ]
  },

  plugins: [
    new ExtractTextPlugin('public/style.css')
  ]
}

しかしwebpack 、JSファイルのみを実行すると、./publicマップに作成されます。

    Asset    Size  Chunks             Chunk Names
bundle.js  844 kB       0  [emitted]  main
    + 222 hidden modules

以下の例/​​チュートリアルは、CSS ファイルのみを対象としているか、ExtractText を実装しないなどの明らかな間違いです。パッケージもダウンロードしましたsass-loader node-sass。いくつかの例では、含まれているパッケージを見つけましたが、含まれていないパッケージもありました。

編集 (index.js でスタイルが必要):

import React from 'react'
import { render } from 'react-dom'
import { Router, browserHistory } from 'react-router'

import routes from './modules/routes'

require('./public/style.css')

render(
    <Router routes={routes} history={browserHistory} />,
    document.getElementById('app')
)

編集 (webpack.config.js):

  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015']
        }
      },
      {
        test      : /\.scss$/,
        include   : path.join(__dirname, './public/sass'),
        loaders   : ["style", "css", "sass"]
      },
      {
        test: /\.scss$/,
        loader: ExtractTextPlugin.extract('css!sass')
      }
    ]
  },

  sassLoader: {
    includePaths: [path.join(__dirname, './public/sass')]
  },

  plugins: [
    new ExtractTextPlugin(path.join(__dirname, './public/style.css'))
  ]

私のフォルダ構造は次のようになります。

webpack.config.js
index.js

/public
    index.html
    bundle.js (generated)

    /sass
        style.scss
        basics.scss (imported in style.scss)
4

2 に答える 2