鍍金池/ 問答/HTML/ webpack css打包報(bào)錯(cuò)

webpack css打包報(bào)錯(cuò)

配置文件：

const path=require('path');
module.exports={
    entry:{
        entry:'./src/entry.js',
        entry2:'./src/entry2.js',
    },//入口
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'[name].js'
    },//出口
    module:{
       
        rules:[
            {
                test:/\.css$/,
                use:['style-loader','css-loader'],
                
            }
        ]
    },//打包c(diǎn)ss 圖片轉(zhuǎn)換
    plugins:[],//插件
    devServer:{
        contentBase:path.resolve(__dirname,'dist'),
        host:'10.0.21.203',
        compress:true,
        port:1818
    },//服務(wù)
    
}

entry.js文件

import css from './css/index.css';

function newtitel(){
document.getElementById('title').innerHTML = 'Hello 111test!';}

newtitel();

package.json文件

{
  "name": "webpacktest",
  "version": "1.0.0",
  "description": "test webpack",
  "main": "index.js",
  "scripts": {
  
    "server": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^0.28.11",
    "style-loader": "^0.21.0",
    "webpack": "^4.12.2",
    "webpack-dev-server": "^3.1.4"
    
  }
}

運(yùn)行npm run server后報(bào)錯(cuò)的信息

ERROR in ./src/css/index.css (./node_modules/_css-loader@0.28.11@css-loader!./src/css/index.css)
Module build failed (from ./node_modules/_css-loader@0.28.11@css-loader/index.js):
TypeError: Cannot read property 'close' of undefined
    at Object.<anonymous> (F:\webpack_demo\node_modules\_chalk@2.4.1@chalk\index.js:72:75)
    at Module._compile (internal/modules/cjs/loader.js:702:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
    at Module.load (internal/modules/cjs/loader.js:612:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
    at Function.Module._load (internal/modules/cjs/loader.js:543:3)
    at Module.require (internal/modules/cjs/loader.js:650:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.<anonymous> (F:\webpack_demo\node_modules\_postcss@6.0.23@postcss\lib\css-syntax-error.js:9:14)
    at Module._compile (internal/modules/cjs/loader.js:702:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
    at Module.load (internal/modules/cjs/loader.js:612:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
    at Function.Module._load (internal/modules/cjs/loader.js:543:3)
    at Module.require (internal/modules/cjs/loader.js:650:17)
    at require (internal/modules/cjs/helpers.js:20:18)
 @ ./src/css/index.css 2:14-97
 @ ./src/entry.js
 @ multi (webpack)-dev-server/client?http://10.0.21.203:1818 ./src/entry.js

嘗試了很多方法都解決不了，求大神賜教?。?！本人新手小白剛學(xué)習(xí)，請(qǐng)說的詳細(xì)的一點(diǎn)，非常感謝！

回答
編輯回答
念初

css怎么寫的

2017年9月24日 19:23
編輯回答
大濕胸

我看你的代碼中是將css文件作為模塊導(dǎo)入，但是并沒有設(shè)置css-loader的 module屬性

試試下面這個(gè)：


            {
                test:/\.css$/,
                use : [
                    {
                        loader : "style-loader",
                    },
                    {
                        loader :"css-loader",
                        options : {
                            module : true,
                        } 
                    }   
                  ]
                
            }

或者直接import './css/index.css';

2018年5月21日 15:24
編輯回答
別硬撐

模塊沖突了, 重新安裝此

rm -rf node_modules
rm package-lock.json
npm install
2018年5月3日 18:05