Webpack 1.15.0 FeathersJS React Redux Material-UI 样式未编译或呈现在渲染中 DOM
Webpack 1.15.0 FeathersJS React Redux Material-UI styles not compiled or present in rendered DOM
我很难确定为什么我的样式表在我试图修改以供自己使用的包中似乎被忽略了。不确定这是 Material-UI 还是 Webpack 本身的问题，但是我添加到任何 .js 文档头部的任何 require 或 import 语句在 运行ning 构建脚本时都会抛出错误. 'import style from './style.css' 的相同导入适用于原始存储库中的文档。
最好的我能够分析我正在使用的 Webpack 配置似乎忽略了任何样式表，除了少数包含在原始包中的样式表以及样式表中确实渲染到 DOM 的任何修改也是无视。我研究过的所有内容都表明此配置有效，并且当我 运行 相应的构建脚本时不会抛出任何错误。
请帮忙！谢谢！
webpack.production.configjs
/* eslint-env node */
/* eslint no-console: 0, no-var: 0 */
// Webpack config for PRODUCTION and DEVELOPMENT modes.
// Changes needed if used for devserver mode.
const webpack = require('webpack');
const rucksack = require('rucksack-css');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const envalid = require('envalid');
const path = require('path');
// Validate environment variables
validateEnvironmentVariables();
const config = require('config');
if (config.NODE_ENV === 'devserver') {
throw new Error('This webpack config does not work as is with the web-dev-server.')
}
const isProduction = config.isProduction;
const outputPublicPaths = {
production: '/dist/',
development: '/dist/',
devserver: 'http://localhost:8080/', // we don't use this config for webpack-dev-server
};
console.log(`----- ${config.NODE_ENV.toUpperCase()} build.`); // eslint-disable-line no-console
// Base Webpack configuration
const webpackConfig = {
context: path.join(__dirname, 'client'),
// re devtool: http://cheng.logdown.com/posts/2016/03/25/679045
devtool: isProduction ? 'cheap-module-source-map' : 'source-map',
entry: {
main: ['./index.js'],
// Webpack cannot produce chunks with a stable chunk hash as of June 2016,
// stable meaning the hash value changes only when the the code itself changes.
// See doc/FAQ.md#webpackChunks.
// This vendor chunk will not reduce network requests, it will likely force a second request
// each time the main chunk changes. So why separate them?
// Chunks for code which is dynamically optionally loaded makes sense.
// The first page will render faster as the parsing of such chunks can be delayed
// till they are needed.
// Of course the React routing must be changed to load such chunks as needed.
// Maybe we'll make the routing do that at some time.
/*
user: [
// './screens/Users/UserSignIn', // sign in occurs often enough to retain in main chunk
'./screens/Users/UserEmailChange',
'./screens/Users/UserForgotPwdReset',
'./screens/Users/UserForgotPwdSendEmail',
'./screens/Users/UserPasswordChange',
'./screens/Users/UserProfile',
'./screens/Users/UserProfileChange',
'./screens/Users/UserRolesChange',
'./screens/Users/UserSignIn',
'./screens/Users/UserSignInPending',
'./screens/Users/UserSignUp',
'./screens/Users/UserSignUpSendEmail',
'./screens/Users/UserSignUpValidateEmail',
],
*/
},
output: {
filename: '[name].bundle.[chunkhash].js',
// Tell Webpack where it should store the resulting code.
path: path.join(__dirname, 'public', 'dist'),
// Give Webpack the URL that points the server to output.path
publicPath: outputPublicPaths[config.NODE_ENV],
},
/* This is needed for joi to work on the browser, if the client has that dependency
node: {
net: 'empty',
tls: 'empty',
dns: 'empty',
},
*/
module: {
loaders: [
{
// File index.html is created by html-webpack-plugin. It should be a file webpack processes.
test: /\.html$/,
loader: 'file?name=[name].[ext]',
},
{
// When require'd, these /client/../*.inject.css files are injected into the DOM as is.
test: /\.inject\.css$/,
include: /client/,
loader: 'style!css',
},
{
// When required, the class names in these /client/../*.css are returned as an object.
// after being made unique. The css with the modified class names is injected into the DOM.
test: /^(?!.*\.inject\.css).*\.css$/,
include: /client/,
loaders: [
'style-loader',
'css-loader'
],
},
{
// Standard processing for .css outside /client
test: /\.css$/,
exclude: /client/,
loader: 'style!css',
},
{
test: /\.(js|jsx)$/, // does anyone still use .jsx?
exclude: /(node_modules|bower_components)/,
loaders: [
/*
'react-hot',
*/
'babel-loader',
],
},
{
test: /\.(svg|woff|woff2|ttf|eot)$/,
loader: 'file?name=assets/fonts/[name].[hash].[ext]'
},
],
},
resolve: {
extensions: ['', '.js', '.jsx'],
// Reroute import/require to specific files. 'react$' reroutes 'react' but not 'react/foo'.
alias: {
},
},
postcss: [
rucksack({
autoprefixer: true,
}),
],
plugins: [
// Webpack's default file watcher does not work with NFS file systems on VMs,
// definitely not with Oracle VM, and likely not with other VMs.
// OldWatchingPlugin is a slower alternative that works everywhere.
new webpack.OldWatchingPlugin(), // can use "webpack-dev-server --watch-poll" instead
/*
Build our HTML file.
*/
// repeat new HtmlWebpackPlugin() for additional HTML files
new HtmlWebpackPlugin({
// Template based on https://github.com/jaketrent/html-webpack-template/blob/master/index.ejs
template: path.join(process.cwd(), 'server', 'utils', 'index.ejs'),
filename: 'index.html',
inject: false, // important
minify: {
collapseWhitespace: true,
conservativeCollapse: true,
minifyCSS: true,
minifyJS: true,
preserveLineBreaks: true, // leave HTML readable
},
cache: false,
/* We'd need this if we had a dynamically loaded user chunk
excludeChunks: ['user'],
*/
// Substitution values
supportOldIE: false,
meta: { description: config.client.appName },
title: config.client.appName,
faviconFile: '/favicon.ico',
mobile: false,
links: [],
baseHref: null,
unsupportedBrowserSupport: false,
appMountId: 'root',
appMountIds: {},
addRobotoFont: true, // See //www.google.com/fonts#UsePlace:use/Collection:Roboto:400,300,500
copyWindowVars: {},
scripts: ['/socket.io/socket.io.js'],
devServer: false,
googleAnalytics: false,
}),
new webpack.DefinePlugin({
'process.env': { NODE_ENV: JSON.stringify(config.NODE_ENV) }, // used by React, etc
__processEnvNODE_ENV__: JSON.stringify(config.NODE_ENV), // used by us
}),
],
};
// Production customization
if (isProduction) {
webpackConfig.plugins.push(
/*
Besides the normal benefits, this is needed to minify React, Redux and React-Router
for production if you choose not to use their run-time versions.
*/
new webpack.optimize.UglifyJsPlugin({
compress: { warnings: false },
comments: false,
sourceMap: false,
mangle: true,
minimize: true,
verbose: false,
})
);
}
module.exports = webpackConfig;
// Validate environment variables
function validateEnvironmentVariables() {
const strPropType = envalid.str;
// valid NODE_ENV values.
const nodeEnv = {
production: 'production',
prod: 'production',
development: 'development',
dev: 'development',
devserver: 'devserver',
testing: 'devserver',
test: 'devserver',
};
const cleanEnv = envalid.cleanEnv(process.env,
{
NODE_ENV: strPropType({
choices: Object.keys(nodeEnv),
default: 'developmwent',
desc: 'processing environment',
}),
}
);
process.env.NODE_ENV = nodeEnv[cleanEnv.NODE_ENV];
}
乍一看，您需要为每个加载程序添加 -loader。你已经完成了一个，但没有完成另外两个：
{
// When require'd, these /client/../*.inject.css files are injected into the DOM as is.
test: /\.inject\.css$/,
include: /client/,
loaders: [
'style-loader',
'css-loader'
]
},
{
// When required, the class names in these /client/../*.css are returned as an object.
// after being made unique. The css with the modified class names is injected into the DOM.
test: /^(?!.*\.inject\.css).*\.css$/,
include: /client/,
loaders: [
'style-loader',
'css-loader'
],
},
{
// Standard processing for .css outside /client
test: /\.css$/,
exclude: /client/,
loaders: [
'style-loader',
'css-loader'
]
},
我很难确定为什么我的样式表在我试图修改以供自己使用的包中似乎被忽略了。不确定这是 Material-UI 还是 Webpack 本身的问题，但是我添加到任何 .js 文档头部的任何 require 或 import 语句在 运行ning 构建脚本时都会抛出错误. 'import style from './style.css' 的相同导入适用于原始存储库中的文档。
最好的我能够分析我正在使用的 Webpack 配置似乎忽略了任何样式表，除了少数包含在原始包中的样式表以及样式表中确实渲染到 DOM 的任何修改也是无视。我研究过的所有内容都表明此配置有效，并且当我 运行 相应的构建脚本时不会抛出任何错误。
请帮忙！谢谢！
webpack.production.configjs
/* eslint-env node */
/* eslint no-console: 0, no-var: 0 */
// Webpack config for PRODUCTION and DEVELOPMENT modes.
// Changes needed if used for devserver mode.
const webpack = require('webpack');
const rucksack = require('rucksack-css');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const envalid = require('envalid');
const path = require('path');
// Validate environment variables
validateEnvironmentVariables();
const config = require('config');
if (config.NODE_ENV === 'devserver') {
throw new Error('This webpack config does not work as is with the web-dev-server.')
}
const isProduction = config.isProduction;
const outputPublicPaths = {
production: '/dist/',
development: '/dist/',
devserver: 'http://localhost:8080/', // we don't use this config for webpack-dev-server
};
console.log(`----- ${config.NODE_ENV.toUpperCase()} build.`); // eslint-disable-line no-console
// Base Webpack configuration
const webpackConfig = {
context: path.join(__dirname, 'client'),
// re devtool: http://cheng.logdown.com/posts/2016/03/25/679045
devtool: isProduction ? 'cheap-module-source-map' : 'source-map',
entry: {
main: ['./index.js'],
// Webpack cannot produce chunks with a stable chunk hash as of June 2016,
// stable meaning the hash value changes only when the the code itself changes.
// See doc/FAQ.md#webpackChunks.
// This vendor chunk will not reduce network requests, it will likely force a second request
// each time the main chunk changes. So why separate them?
// Chunks for code which is dynamically optionally loaded makes sense.
// The first page will render faster as the parsing of such chunks can be delayed
// till they are needed.
// Of course the React routing must be changed to load such chunks as needed.
// Maybe we'll make the routing do that at some time.
/*
user: [
// './screens/Users/UserSignIn', // sign in occurs often enough to retain in main chunk
'./screens/Users/UserEmailChange',
'./screens/Users/UserForgotPwdReset',
'./screens/Users/UserForgotPwdSendEmail',
'./screens/Users/UserPasswordChange',
'./screens/Users/UserProfile',
'./screens/Users/UserProfileChange',
'./screens/Users/UserRolesChange',
'./screens/Users/UserSignIn',
'./screens/Users/UserSignInPending',
'./screens/Users/UserSignUp',
'./screens/Users/UserSignUpSendEmail',
'./screens/Users/UserSignUpValidateEmail',
],
*/
},
output: {
filename: '[name].bundle.[chunkhash].js',
// Tell Webpack where it should store the resulting code.
path: path.join(__dirname, 'public', 'dist'),
// Give Webpack the URL that points the server to output.path
publicPath: outputPublicPaths[config.NODE_ENV],
},
/* This is needed for joi to work on the browser, if the client has that dependency
node: {
net: 'empty',
tls: 'empty',
dns: 'empty',
},
*/
module: {
loaders: [
{
// File index.html is created by html-webpack-plugin. It should be a file webpack processes.
test: /\.html$/,
loader: 'file?name=[name].[ext]',
},
{
// When require'd, these /client/../*.inject.css files are injected into the DOM as is.
test: /\.inject\.css$/,
include: /client/,
loader: 'style!css',
},
{
// When required, the class names in these /client/../*.css are returned as an object.
// after being made unique. The css with the modified class names is injected into the DOM.
test: /^(?!.*\.inject\.css).*\.css$/,
include: /client/,
loaders: [
'style-loader',
'css-loader'
],
},
{
// Standard processing for .css outside /client
test: /\.css$/,
exclude: /client/,
loader: 'style!css',
},
{
test: /\.(js|jsx)$/, // does anyone still use .jsx?
exclude: /(node_modules|bower_components)/,
loaders: [
/*
'react-hot',
*/
'babel-loader',
],
},
{
test: /\.(svg|woff|woff2|ttf|eot)$/,
loader: 'file?name=assets/fonts/[name].[hash].[ext]'
},
],
},
resolve: {
extensions: ['', '.js', '.jsx'],
// Reroute import/require to specific files. 'react$' reroutes 'react' but not 'react/foo'.
alias: {
},
},
postcss: [
rucksack({
autoprefixer: true,
}),
],
plugins: [
// Webpack's default file watcher does not work with NFS file systems on VMs,
// definitely not with Oracle VM, and likely not with other VMs.
// OldWatchingPlugin is a slower alternative that works everywhere.
new webpack.OldWatchingPlugin(), // can use "webpack-dev-server --watch-poll" instead
/*
Build our HTML file.
*/
// repeat new HtmlWebpackPlugin() for additional HTML files
new HtmlWebpackPlugin({
// Template based on https://github.com/jaketrent/html-webpack-template/blob/master/index.ejs
template: path.join(process.cwd(), 'server', 'utils', 'index.ejs'),
filename: 'index.html',
inject: false, // important
minify: {
collapseWhitespace: true,
conservativeCollapse: true,
minifyCSS: true,
minifyJS: true,
preserveLineBreaks: true, // leave HTML readable
},
cache: false,
/* We'd need this if we had a dynamically loaded user chunk
excludeChunks: ['user'],
*/
// Substitution values
supportOldIE: false,
meta: { description: config.client.appName },
title: config.client.appName,
faviconFile: '/favicon.ico',
mobile: false,
links: [],
baseHref: null,
unsupportedBrowserSupport: false,
appMountId: 'root',
appMountIds: {},
addRobotoFont: true, // See //www.google.com/fonts#UsePlace:use/Collection:Roboto:400,300,500
copyWindowVars: {},
scripts: ['/socket.io/socket.io.js'],
devServer: false,
googleAnalytics: false,
}),
new webpack.DefinePlugin({
'process.env': { NODE_ENV: JSON.stringify(config.NODE_ENV) }, // used by React, etc
__processEnvNODE_ENV__: JSON.stringify(config.NODE_ENV), // used by us
}),
],
};
// Production customization
if (isProduction) {
webpackConfig.plugins.push(
/*
Besides the normal benefits, this is needed to minify React, Redux and React-Router
for production if you choose not to use their run-time versions.
*/
new webpack.optimize.UglifyJsPlugin({
compress: { warnings: false },
comments: false,
sourceMap: false,
mangle: true,
minimize: true,
verbose: false,
})
);
}
module.exports = webpackConfig;
// Validate environment variables
function validateEnvironmentVariables() {
const strPropType = envalid.str;
// valid NODE_ENV values.
const nodeEnv = {
production: 'production',
prod: 'production',
development: 'development',
dev: 'development',
devserver: 'devserver',
testing: 'devserver',
test: 'devserver',
};
const cleanEnv = envalid.cleanEnv(process.env,
{
NODE_ENV: strPropType({
choices: Object.keys(nodeEnv),
default: 'developmwent',
desc: 'processing environment',
}),
}
);
process.env.NODE_ENV = nodeEnv[cleanEnv.NODE_ENV];
}
乍一看，您需要为每个加载程序添加 -loader。你已经完成了一个，但没有完成另外两个：
{
// When require'd, these /client/../*.inject.css files are injected into the DOM as is.
test: /\.inject\.css$/,
include: /client/,
loaders: [
'style-loader',
'css-loader'
]
},
{
// When required, the class names in these /client/../*.css are returned as an object.
// after being made unique. The css with the modified class names is injected into the DOM.
test: /^(?!.*\.inject\.css).*\.css$/,
include: /client/,
loaders: [
'style-loader',
'css-loader'
],
},
{
// Standard processing for .css outside /client
test: /\.css$/,
exclude: /client/,
loaders: [
'style-loader',
'css-loader'
]
},