0
Incertain où je me trompe.Ceci est mon webpack.prod pour regrouper le côté client. mais certains ne sont pas la façon dont classnames apparaissent dans mon htmlLes noms de classe ne s'affichent pas Réagissez
const path = require('path');
const webpack = require('webpack');
const dependencies = require('./package.json');
const ManifestPlugin = require('webpack-manifest-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const VENDOR_LIBS = [];
Object.entries(dependencies.dependencies).forEach(([key, value]) => {
VENDOR_LIBS.push(key);
});
const BrowserConfig = {
entry: {
bundle: './src/index',
vendor: VENDOR_LIBS,
},
output: {
path: path.resolve('./dist'),
publicPath: '/',
filename: '[name].js',
pathinfo: true,
},
resolve: {
extensions: ['.js', '.jsx', '.json', '.scss', '.css'],
},
module: {
rules: [
{
use: ['react-hot-loader/webpack', 'babel-loader'],
test: /\.(js|jsx)$/,
exclude: /node_modules/,
},
{
test: /\.(woff|woff2|eot|ttf|svg|otf)$/,
use: 'file-loader?limit=1024&name=fonts/[name].[ext]',
},
{
test: /\.(gif|jpe?g|png|ico)$/,
loader: ['file-loader?name=images/[name].[ext]&limit=100000'],
},
{
test: /\.(scss|css)$/,
exclude: /node_modules/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{ loader: 'css-loader',
options: {
sourceMap: true,
camelCase: true,
minimize: true,
namedExport: true,
modules: true,
importLoaders: 2,
localIdentName: '[hash:base64:5]',
},
},
{ loader: 'postcss-loader',
options: {
sourceMap: true,
plugins:() => ([
require('autoprefixer')({
browsers: ['last 2 versions', 'ie >= 9'],
}),
]),
},
},
// { loader: 'sass-loader', options: { sourceMap: true } },
],
}),
},
],
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.CommonsChunkPlugin({
name: ['vendor'],
}),
new CleanWebpackPlugin(['dist']),
new webpack.NoEmitOnErrorsPlugin(),
new webpack.optimize.AggressiveMergingPlugin(),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify(process.env.NODE_ENV),
},
BROWSER: true,
DEBUG: false,
__DEVTOOLS__: false,
}),
new ManifestPlugin({
fileName: './manifest.json',
}),
new ExtractTextPlugin({
filename: '[name].css',
allChunks: true,
}),
],
devServer: {
contentBase: './dist',
hot: true,
historyApiFallback: true,
},
devtool: 'source-map',
};
module.exports = BrowserConfig;
Ce fichier est header.js où dans, j'ai des styles importés de fichier header.scss.
import React, { Component } from 'react';
import styles from './header.scss';
class Header extends Component {
render() {
return (
<div className={ styles.headerContainer }>This is Header</div>
);
}
}
export default Header;
fichier header.scss se compose du code ci-dessous:
.headerContainer{
border: 1px solid #ddd;
}
Ceci est capture d'écran de ma console où dans les classes n'apparaissent pas. enter image description here
j'ai inclus les dépendances suivantes dans mon package.json
{
"name": "wander",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "NODE_ENV='development' webpack --config='webpack.server.js' && node dist/serverdist.js",
"build": "NODE_ENV='production' webpack -p --config='webpack.prod' && NODE_ENV='production' webpack -p --config='webpack.server' && node dist/serverdist.js"
},
"author": "",
"license": "ISC",
"dependencies": {
"history": "^4.7.2",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-redux": "^5.0.6",
"react-router": "^4.2.0",
"react-router-dom": "^4.2.2",
"redux": "^3.7.2"
},
"devDependencies": {
"autoprefixer": "^7.1.5",
"babel-cli": "^6.26.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-css-modules-transform": "^1.2.7",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-preset-stage-1": "^6.24.1",
"clean-webpack-plugin": "^0.1.17",
"compression-webpack-plugin": "^1.0.1",
"css-loader": "^0.28.7",
"eslint": "^4.8.0",
"eslint-config-airbnb": "^15.1.0",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-react": "^7.4.0",
"express": "^4.16.1",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"html-webpack-plugin": "^2.30.1",
"json-loader": "^0.5.7",
"node-sass": "^4.5.3",
"postcss-loader": "^2.0.6",
"react-hot-loader": "^3.0.0-beta.7",
"sass-loader": "^6.0.6",
"style-loader": "^0.18.2",
"url-loader": "^0.5.9",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-middleware": "^1.12.0",
"webpack-dev-server": "^2.9.1",
"webpack-hot-middleware": "^2.19.1",
"webpack-manifest-plugin": "^1.3.2",
"webpack-node-externals": "^1.6.0"
}
}
sur Serverside j'ai le code comme celui-ci;
app.use(express.static('dist'));
app.get('*', (req, res) => {
if (process.env.NODE_ENV === 'production') {
res.send(`
<!DOCTYPE html>
<head>
<title>Wander Blog</title>
<link rel="stylesheet" type="text/css" href="/bundle.css">
</head>
<body>
<div id='app'>${renderToString(<App />)}</div>
<script type="text/javascript" src="/vendor.js" defer></script>
<script type="text/javascript" src="/bundle.js" defer></script>
</body>
</html>
`);
}
});
Il ne mélange pas, il essaie d'utiliser le chargeur de style sans succès. 'style-loader' charge css et le convertit en cssModule dans webpack et génère un nom de classe unique pour chaque classe définie dans le CSS. –
@GershonPapi Wow, vraiment bon attraper – Andrew