javascript - css-loader引入样式文件以后，导致webpack打包js报错

问题描述

问 题

Error/index.js就是文件引入样式文件，webpack打包以后生成的文件当中js代码的最后一段会被重复，导致js报错，不能运行，如图

但是，如果我重新保存一下<Router>文件，触发路由文件的重新打包，问题就能修复。但是，如果重新开启服务，问题会在次出现

被重复的代码

` 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 (
            <div styleName="lottery_error">
                <div styleName="error_img">
                    <img src={ errorImg } />
                </div>
                <p>{ errorTxt }</p>
                <div styleName="btn_wrap">
                    <a styleName="btn_submit" href="javascript:;" onClick={ this.goHome }>返回首页</a>
                </div>
            </div>
        );
    }
}

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"
  }
}

解决方案

问题解决了哦，这应该是webpack的一个bug，坑了我好多天啊。。。。

问题就出在上图中的回调函数A，和文件监控功能B，不能同时存在！！！删除其中任何一个就能正确打包样式文件。

这篇关于javascript - css-loader引入样式文件以后，导致webpack打包js报错的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！