我有一个问题，使用下面webpack的下面package.json会导致flexboxgrid类被破坏，如下所示。
以下是查看 html 时生成某些类的方式：
flexboxgrid__container-fluid___2lUES
flexboxgrid__row___1y_mg flexboxgrid__center-sm___39HWq
有谁知道这可能是什么原因造成的？
package.json
"devDependencies": {
"babel-cli": "^6.23.0",
"babel-core": "^6.13.2",
"babel-eslint": "^7.1.1",
"babel-loader": "^7.0.0",
"babel-plugin-react-html-attrs": "^2.0.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-es2016": "^6.22.0",
"babel-preset-react": "^6.23.0",
"babel-preset-stage-2": "^6.22.0",
"cross-env": "^4.0.0",
"css-loader": "^0.28.4",
"eslint": "^3.16.0",
"eslint-loader": "^1.6.3",
"eslint-plugin-react": "^6.10.0",
"exports-loader": "^0.6.4",
"file-loader": "^0.11.1",
"html-loader": "^0.5.0",
"html-webpack-plugin": "^2.28.0",
"style-loader": "^0.18.2",
"webpack": "^3.5.3",
"webpack-dev-server": "^2.6.1"
},
"dependencies": {
"axios": "^0.16.0",
"core-js": "^2.5.0",
"flux": "^3.1.2",
"material-ui": "^0.17.4",
"prop-types": "^15.5.8",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-flexbox-grid": "^1.1.2",
"react-tap-event-plugin": "^2.0.1",
"sugar": "^2.0.4"
}
webpack.config.js
const WebpackDevHelper = require('./webpack/webpackDevHelper');
const environment = process.env.NODE_ENV.toUpperCase();
const webpackHelper = new WebpackDevHelper(environment);
const colors = {
reset: '\x1b[0m',
fg: {
red: '\x1b[31m'
}
};
console.log(colors.fg.red, `Building in ${environment} mode.`, colors.reset);
module.exports = {
devtool: webpackHelper.devTools,
entry: webpackHelper.entries,
output: webpackHelper.output,
resolve: webpackHelper.resolve,
stats: webpackHelper.stats,
module: {
rules: webpackHelper.rules
},
plugins: webpackHelper.plugins,
devServer: webpackHelper.webpackDevServer,
node: webpackHelper.node,
};
WebpackHelper.js
const packages = require('../package.json');
const path = require('path');
module.exports = class WebpackHelper {
constructor(environment) {
this.environment = environment;
}
get entryPoints() {
return ['manifest', 'polyfills', 'sw-register', 'styles', 'vendor', 'app'];
}
get entries() {
const vendorPackages = Object.keys(packages.dependencies)
.filter(d => d !== 'core-js');
return {
'polyfills': './src/js/polyfills.js',
'app': './src/js/main.js',
'styles': [
'flexboxgrid',
'./src/css/styles.css'
],
'vendor': vendorPackages,
};
}
get output() {
return {
path: path.join(process.cwd(), 'build'),
filename: this.isDevelopment ? 'js/[name].bundle.js' : 'js/[name].bundle.[chunkhash:8].min.js',
chunkFilename: this.isDevelopment ? './build/js/[id].bundle.chunk.js' : './build/js/[id].bundle.chunk.[chunkhash:8].min.js'
};
}
get devTools() {
return this.isDevelopment ? 'inline-source-map' : 'source-map';
}
get resolve() {
return {
extensions: ['.js']
};
}
get isProduction() {
return this.environment === 'PRODUCTION';
}
get isDevelopment() {
return this.environment === 'DEVELOPMENT';
}
get rules() {
return [
{
test: /\.js?$/,
enforce: 'pre',
exclude: /node_modules/,
loader: 'eslint-loader'
},
{
test: /.js?$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.html$/,
exclude: /node_modules/,
use: 'html-loader'
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|otf|ttf|eot|ico)$/,
exclude: /node_modules/,
use: 'file-loader?name=assets/[name].[hash].[ext]'
},
{
test: /\.css?$/,
exclude: /node_modules/,
use: [
// 'style-loader',
// 'css-loader'
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
modules: false,
localIdentName: '[local]'
}
}
]
},
{
test: /flexboxgrid.css?$/,
use: [
// 'style-loader',
// 'css-loader'
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
modules: false,
localIdentName: '[local]'
}
}
],
include: /flexboxgrid/
},
];
}
get node() {
return {
'fs': 'empty',
'global': true,
'crypto': 'empty',
'tls': 'empty',
'net': 'empty',
'process': true,
'module': false,
'clearImmediate': false,
'setImmediate': false
};
}
get webpackDevServer() {
return {
port: 4200,
historyApiFallback: true,
stats: this.stats,
};
}
get stats() {
return {
colors: true,
hash: false,
version: true,
timings: true,
assets: true,
chunks: false,
modules: false,
reasons: true,
children: true,
source: false,
errors: true,
errorDetails: true,
warnings: true,
publicPath: true,
cached: false,
cachedAssets: false,
chunkModules: false,
chunkOrigins: false,
depth: false,
entrypoints: false,
performance: false,
providedExports: false,
usedExports: false,
maxModules: 0,
};
}
};
webpackDevHelper.js
const { CommonsChunkPlugin, OccurrenceOrderPlugin, UglifyJsPlugin } = require('webpack').optimize;
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {
NamedModulesPlugin,
NoEmitOnErrorsPlugin,
} = require('webpack');
const path = require('path');
const fs = require('fs');
const WebpackHelper = require('./WebpackHelper');
const nodeModules = path.join(process.cwd(), 'node_modules');
const realNodeModules = fs.realpathSync(nodeModules);
const genDirNodeModules = path.join(process.cwd(), 'src', '$$_gendir', 'node_modules');
module.exports = class WebpackDevHelper extends WebpackHelper {
constructor(environment) {
super(environment);
}
get plugins() {
const plugins = [
new NoEmitOnErrorsPlugin(),
new HtmlWebpackPlugin({
template: 'src/html/index.html',
chunksSortMode: (left, right) => {
let leftIndex = this.entryPoints.indexOf(left.names[0]);
let rightIndex = this.entryPoints.indexOf(right.names[0]);
if (leftIndex > rightIndex) {
return 1;
}
else if (leftIndex < rightIndex) {
return -1;
}
else {
return 0;
}
},
fileName: './index.html',
hash: false,
compile: false,
favicon: false,
cache: false,
showErrors: true,
chunks: 'all',
excludeChunks: [],
minify: {
removeComments: this.isProduction,
collapseWhitespace: this.isProduction
}
}),
new CommonsChunkPlugin({
'name': [
'manifest'
],
'minChunks': null
}),
new CommonsChunkPlugin({
'name': [
'vendor',
],
'minChunks': (module) => {
return module.resource
&& (module.resource.startsWith(nodeModules)
|| module.resource.startsWith(genDirNodeModules)
|| module.resource.startsWith(realNodeModules));
},
'chunks': [
'app'
]
})
];
if (this.isProduction) {
plugins.push(new OccurrenceOrderPlugin());
plugins.push(new NamedModulesPlugin());
plugins.push(new UglifyJsPlugin({
sourceMap: true,
minimize: true,
beautify: false,
mangle: { screw_ie8: true, keep_fnames: true },
dead_code: true,
unused: true,
deadCode: true,
comments: false,
compress: {
screw_ie8: true,
keep_fnames: true,
drop_debugger: false,
dead_code: false,
unused: false,
warnings: false
}
}));
}
return plugins;
}
};