使用webpack ExtractTextPlugin获取css输出
我试图让CSS需要使用ExtractTextPlugin在webpack中工作，但没有成功
我想要一个单独的CSS文件，而不是内联任何CSS。
这是我的webpackconfiguration：
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错误
有任何想法吗？
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") ] }
我已经修改了你的configuration文件名以及如何将它们包含在页面中
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: 'scripts/bundle.js', publicPath: '/scripts/' }, plugins: [ new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin(), new ExtractTextPlugin('styles/styles.css', { publicPath: '/styles/', 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') }] } };
以下是html页面
<html> <head> <link rel="stylesheet" href="build/styles/styles.css"> </head> <body> <div id='root'></div> </body> <script src="build/scripts/bundle.js"></script> </html>
一起使用css-loader和style-loaderparsing你的CSS，然后把它变成风格节点，就像代码一样，可以在Webpack中导入。 我不明白你为什么要在你的JavaScript和你的CSS之间build立这种人造关系。
上述方法最终再次发布CSS。 为什么把你的代码通过这样的往返？ 使用raw-loader并将您的主CSS文件添加到您的入口点。 你失去了css-loader执行的任何错误检查，但编译发生得更快。 但是如果你使用的是像sass-loader这样的东西，你仍然会得到所有的错误检查。
这是一个webpack.config.js工作。 我不使用相同的目录名称，但我认为您可以看到差异并进行必要的更改。 我还包括我目前的模块版本。
const path = require('path'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const config = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'build'), filename: 'bundle.js', publicPath: 'build/' }, module: { rules: [ { use: 'babel-loader', test: /\.js$/ }, { loader: ExtractTextPlugin.extract({fallback: 'style-loader', use: 'css-loader'}), test: /\.css$/ }, { test: /\.(jpe?g|png|gif|svg)$/, use: [ { loader: 'url-loader', options: { limit: 40000 } }, 'image-webpack-loader?bypassOnDebug' ] } ] }, plugins: [ new ExtractTextPlugin({filename: 'style.css', allChunks: true }) ] }; module.exports = config;
//和模块：
"devDependencies": { "babel-core": "^6.24.1", "babel-loader": "^6.4.1", "babel-preset-env": "^1.3.3", "css-loader": "^0.28.0", "extract-text-webpack-plugin": "^2.0.0-beta.4", "file-loader": "^0.11.1", "image-webpack-loader": "^3.3.0", "style-loader": "^0.16.1", "url-loader": "^0.5.8", "webpack": "^2.2.0-rc.0" }
