我正在跑步：
webpack -p --config webpack.config.js --progress --colors
并收到这些错误：
ERROR in ./~/css-loader!./~/bootstrap-material-design/dist/css/bootstrap-material-design.css
Module build failed: SyntaxError: Unexpected identifier
at Module._compile (module.js:439:25)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at /var/www/node_modules/svgo/lib/svgo/config.js:99:33
at Array.map (native)
at preparePluginsArray (/var/www/node_modules/svgo/lib/svgo/config.js:64:20)
at module.exports (/var/www/node_modules/svgo/lib/svgo/config.js:32:28)
at new module.exports (/var/www/node_modules/svgo/lib/svgo.js:21:19)
at /var/www/node_modules/postcss-svgo/dist/index.js:91:16
at Object.creator [as postcssSvgo] (/var/www/node_modules/postcss/lib/postcss.js:150:35)
at /var/www/node_modules/cssnano/dist/index.js:276:40
at Array.forEach (native)
at /var/www/node_modules/cssnano/dist/index.js:263:29
at creator (/var/www/node_modules/postcss/lib/postcss.js:150:35)
at processCss (/var/www/node_modules/css-loader/lib/processCss.js:183:16)
at Object.module.exports (/var/www/node_modules/css-loader/lib/loader.js:22:2)
@ ./~/bootstrap-material-design/dist/css/bootstrap-material-design.css
和
ERROR in ./~/css-loader!./~/less-loader!./~/bootstrap-webpack/bootstrap-styles.loader.js!./~/bootstrap-webpack/bootstrap.config.js
Module build failed: SyntaxError: Unexpected identifier
at Module._compile (module.js:439:25)
at Object.Module._extensions..js (module.js:474:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at /var/www/node_modules/svgo/lib/svgo/config.js:99:33
at Array.map (native)
at preparePluginsArray (/var/www/node_modules/svgo/lib/svgo/config.js:64:20)
at module.exports (/var/www/node_modules/svgo/lib/svgo/config.js:32:28)
at new module.exports (/var/www/node_modules/svgo/lib/svgo.js:21:19)
at /var/www/node_modules/postcss-svgo/dist/index.js:91:16
at Object.creator [as postcssSvgo] (/var/www/node_modules/postcss/lib/postcss.js:150:35)
at /var/www/node_modules/cssnano/dist/index.js:276:40
at Array.forEach (native)
at /var/www/node_modules/cssnano/dist/index.js:263:29
at creator (/var/www/node_modules/postcss/lib/postcss.js:150:35)
at processCss (/var/www/node_modules/css-loader/lib/processCss.js:183:16)
at Object.module.exports (/var/www/node_modules/css-loader/lib/loader.js:22:2)
@ ./~/style-loader!./~/css-loader!./~/less-loader!./~/bootstrap-webpack/bootstrap-styles.loader.js!./~/bootstrap-webpack/bootstrap.config.js
我不知道这里有什么问题。有人可以给我一个暗示吗？
以下是 index.js ：
import 'jquery';
import 'bootstrap-webpack';
import 'ripples';
import 'bootstrap-material-design';
import 'bootstrap-material-design/dist/css/bootstrap-material-design.css';
require('./style.less');
import React from 'react';
import { render } from 'react-dom';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import promise from 'redux-promise';
import createLogger from 'redux-logger';
import reducer from './reducer';
import { App } from './containers';
import { fetchSuggestions, selectSuggestion } from './actions'
import injectTapEventPlugin from 'react-tap-event-plugin';
injectTapEventPlugin();
const store = createStore(reducer, applyMiddleware(thunk, promise));
store.dispatch(fetchSuggestions()).then(() => {
store.dispatch(selectSuggestion(store.getState().get('suggestions').first()));
});
render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('app')
);
$(document).ready(function () {
$.material.init();
});
webpack.config.js ：
const webpack = require('webpack');
const path = require('path');
const buildPath = path.resolve(__dirname, 'build');
const nodeModulesPath = path.resolve(__dirname, 'node_modules');
const TransferWebpackPlugin = require('transfer-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const config = {
entry: [path.join(__dirname, '/myapp/app/index.js')],
// Render source-map file for final build
devtool: 'source-map',
// output config
output: {
path: buildPath, // Path of output file
filename: 'app.js', // Name of output file
},
plugins: [
// Define production build to allow React to strip out unnecessary checks
new webpack.DefinePlugin({
'process.env':{
'NODE_ENV': JSON.stringify('development')
}
}),
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery',
}),
// Minify the bundle
new webpack.optimize.UglifyJsPlugin({
compress: {
// suppresses warnings, usually from module minification
warnings: false,
},
}),
// Allows error warnings but does not stop compiling.
new webpack.NoErrorsPlugin(),
// Transfer Files
new TransferWebpackPlugin([
{from: 'html', to: 'html'},
{from: 'img', to: 'img'},
], path.resolve(__dirname, 'myapp/static')),
],
module: {
loaders: [
{
test: /\.js$/, // All .js files
loaders: ['babel-loader'], // react-hot is like browser sync and babel loads jsx and es6-7
exclude: [nodeModulesPath],
},
{ test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }, // use ! to chain loaders
{ test: /\.css$/, loader: 'style-loader!css-loader' },
{ test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000&minetype=application/font-woff2' },
],
},
styleLoader: require('extract-text-webpack-plugin').extract('style-loader', 'css-loader!postcss-loader!less-loader')
};
module.exports = config;
和 package.json ：
{
"name": "MyApp",
"version": "0.15.0",
"description": "MyApp",
"repository": {
"type": "git",
"url": ""
},
"scripts": {
"dev": "webpack-dev-server --config webpack.dev.config.js --progress --inline --colors --no-info",
"build": "webpack -p --config webpack.config.js --progress --colors"
},
"private": true,
"devDependencies": {
"babel-core": "^6.3.26",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"html-webpack-plugin": "^2.7.2",
"react-hot-loader": "^1.3.0",
"transfer-webpack-plugin": "^0.1.4",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0"
},
"dependencies": {
"bootstrap": "^3.3.7",
"bootstrap-material-design": "^0.5.10",
"bootstrap-webpack": "0.0.5",
"css-loader": "^0.18.0",
"es6-promise": "^3.2.1",
"exports-loader": "^0.6.3",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"immutable": "^3.8.1",
"imports-loader": "^0.6.5",
"isomorphic-fetch": "^2.2.1",
"jquery": "^2.2.4",
"less": "^2.7.1",
"less-loader": "^2.2.3",
"lodash": "^4.15.0",
"material": "^0.1.1",
"material-ui": "^0.15.0",
"react": "^15.0.1",
"react-dom": "^15.0.1",
"react-redux": "^4.4.5",
"react-tap-event-plugin": "^1.0.0",
"redux": "^3.5.2",
"redux-logger": "^2.6.1",
"redux-promise": "^0.5.3",
"redux-thunk": "^2.1.0",
"ripples": "0.0.1",
"style-loader": "^0.13.1",
"url-loader": "^0.5.7"
}
}