Я пытаюсь получить css требует работать в webpack с помощью ExtractTextPlugin, но без успеха
Я хочу отдельный файл css, а не встраивание любого css.
Вот мой конфигуратор webpack:
var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
devtool: 'eval',
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./scripts/index'
],
output: {
path: path.join(__dirname, 'build'),
filename: 'bundle.js',
publicPath: '/scripts/'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new ExtractTextPlugin('styles/styles.css', {
allChunks: true
})
],
resolve: {
extensions: ['', '.js', '.jsx']
},
module: {
loaders: [{
test: /\.jsx?$/,
loaders: ['react-hot', 'babel'],
include: path.join(__dirname, 'scripts')
},
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
}]
}
};
index.js:
import React from 'react';
import App from './App';
React.render(<App />, document.getElementById('root'));
App.js:
import React from 'react';
require('../styles/app.css');
export default class App extends React.Component {
render() {
return (
<h1>Hello, world.</h1>
);
}
}
index.html
<html>
<head>
<link rel="stylesheet" href="/styles/styles.css">
</head>
<body>
<div id='root'></div>
</body>
<script src="/scripts/bundle.js"></script>
</html>
styles.css возвращает 404
Любая идея, что здесь может быть неправильным. Если я не использую ExtractTextPlugin и просто делаю это в config:
module: {
loaders: [
{ test: /\.css$/, loader: "style-loader!css-loader" }
]
}
то я получаю css, примененный к странице правильно, но очевидно, что это не происходит из файла css
Это моя первая попытка использовать webpack, поэтому, возможно, совершив ошибку noob
Любые идеи?
