webpack - minicssextractplugin - Obteniendo salida CSS usando el paquete web ExtractTextPlugin
webpack 4 css (4)
Aquí hay un webpack.config.js que funciona. No uso los mismos nombres de directorio que tú, pero creo que puedes ver las diferencias y realizar los cambios necesarios. También estoy incluyendo mis versiones de módulos actuales.
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;
// y módulos:
"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"
}
Estoy tratando de obtener css requiere para trabajar en el paquete web utilizando ExtractTextPlugin pero sin éxito
Quiero un archivo css por separado en lugar de insertar cualquier CSS.
Aquí está mi configuración de paquete web:
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 está devolviendo 404
Alguna idea de lo que podría estar yendo mal aquí. Si no uso ExtractTextPlugin y solo hago esto en config:
module: {
loaders: [
{ test: //.css$/, loader: "style-loader!css-loader" }
]
}
entonces obtengo el css aplicado a la página correctamente pero obviamente esto no viene de un archivo css
Este es mi primer intento de usar el paquete web, probablemente haciendo algún error novato
¿Algunas ideas?
He modificado sus nombres de archivo de configuración y cómo los incluye en la página
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'')
}]
}
};
La siguiente es la página 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>
Usando css-loader y style-loader juntos primero analice su CSS, luego conviértalo en nodos de estilo, que pueden ser importados en un paquete web al igual que el código. No entiendo por qué querrías que esta relación artificial se construya entre tu JavaScript y tu CSS.
El enfoque anterior emite CSS nuevamente al final. ¿Por qué poner tu código en un viaje redondo como ese? Use raw-loader y agregue su archivo CSS principal a sus puntos de entrada. Se pierde cualquier comprobación de errores que realice el css-loader , pero su compilación ocurre mucho más rápido. Pero si está usando algo como sass-loader , igual obtendrá toda la comprobación de errores.
ExtractTextPlugin debe agregarse en dos puntos: en el Loader y como un complemento. Aquí está el ejemplo extraído de la documentación de las hojas de estilo .
// 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")
]
}