Error/index.js就是文件引入样式文件,webpack打包以后生成的文件当中js代码的最后一段会被重复,导致js报错,不能运行,如图
但是,如果我重新保存一下
被重复的代码
` diff: false,
diffPredicate: undefined,
// Deprecated options
transformer: undefined
};
module.exports = exports['default'];
/*/ }
// ]);d,
// Deprecated options
transformer: undefined
};
module.exports = exports['default'];
/*/ }
// ]);`
Error/index.js文件代码
import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './Error.css';
import img404 from './404.png';
import { browserHistory } from 'react-router';
class Error extends React.Component {
goHome = () => {
browserHistory.push('/test1');
}
render() {
let errorImg = img404;
let errorTxt = '';
return (
{ errorTxt }
);
}
}
export default CSSModules(Error, styles);
webpack的配置文件代码
{
entry: {
index: "./js/toDoList/App.js"
},
output: {
path: "dist/js/",
publicPath: "dist/js/",
filename: "[name].js",
chunkFilename: "[name].js"
},
module: {
loaders: [{
test: /\.js$/,
loader: "babel",
query: {
presets: ['react', 'es2015', 'stage-2']
}
},{
test: /\.css$/,
loader: 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'
},{
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
loader: 'file'
}]
}
}
css代码
.lottery_error{}
在最后贴上package.json
{
"name": "webpacktest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.17.0",
"babel-loader": "^6.2.5",
"babel-preset-es2015": "^6.16.0",
"babel-preset-react": "^6.16.0",
"babel-preset-stage-2": "^6.18.0",
"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"react": "^15.3.2",
"react-css-modules": "^3.7.10",
"react-dom": "^15.3.2",
"react-redux": "^4.4.5",
"react-router": "^3.0.0",
"redux": "^3.6.0",
"redux-logger": "^2.7.4",
"redux-thunk": "^2.1.0",
"style-loader": "^0.13.1",
"webpack": "^1.13.2"
}
}
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
人生最曼妙的风景,竟是内心的淡定与从容!