我试图让css需要使用ExtractTextPlugin在webpack中工作,但没有成功
我想要一个单独的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错误
有任何想法吗？
mat*_*pie 29
ExtractTextPlugin需要在两个位置添加:在Loader中,以及作为插件.这是从样式表文档中提取的示例.
// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
// The standard entry point and output config
entry: {
posts: "./posts",
post: "./post",
about: "./about"
},
output: {
filename: "[name].js",
chunkFilename: "[id].js"
},
module: {
loaders: [
// Extract css files
{
test: /\.css$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader")
},
// Optionally extract less files
// or any other compile-to-css language
{
test: /\.less$/,
loader: ExtractTextPlugin.extract("style-loader", "css-loader!less-loader")
}
// You could also use other loaders the same way. I. e. the autoprefixer-loader
]
},
// Use the plugin to specify the resulting filename (and add needed behavior to the compiler)
plugins: [
new ExtractTextPlugin("[name].css")
]
}
| 归档时间： |
|
| 查看次数： |
49273 次 |
| 最近记录： |