使用import 引入css文件報(bào)錯(cuò)：
ERROR in ./css/index.css 1:4
Module parse failed: Unexpected token (1:4)
You may need an appropriate loader to handle this file type.
解決辦法：
const path = require('path');
//添加VueLoaderPlugin
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
mode:'development',
entry:path.join(__dirname,'src/index.js'),
output:{
filename:'bundle.js',
path:path.join(__dirname,'dist')
},
module:{
rules:[
{
test:/\.vue$/,
loader:'vue-loader'
},
{
test: /\.css$/,
use: ['style-loader','css-loader']
},
]
},
//添加VueLoaderPlugin
plugins:[
new VueLoaderPlugin()
]
};
運(yùn)行npm run 報(bào)錯(cuò)：
ENOENT: no such file or directory, open 'D:\Program\webstorm\webpack_12.26\package.json'
原因是：沒(méi)有切換到項(xiàng)目目錄里面叽躯。
（一）loader安裝與使用
1 使用語(yǔ)句：npm init -y 進(jìn)行初始化袒炉，獲取到package.json交掏。
2 使用語(yǔ)句：npm install webpack webpack-cli -D 安裝webpack和webpack-cli。
3 創(chuàng)建index.html,index.css,index.js文件。在index.css里面設(shè)置body的背景顏色為黃色古拴。
4 在index.js里面書(shū)寫(xiě)一些內(nèi)容箩帚，并import css文件。
import './index.css'
console.log("haha");
5 修改webpack.config.js文件的配置：
module.exports = {
//設(shè)置模式斤富，開(kāi)發(fā)模式不壓縮
mode:'development',
entry:{
index:'./index.js'
},
output:{
filename:'[name].bundle.js',
path:__dirname + '/dist'
},
module:{
//在這里配置css文件
rules:[
{
//正則表達(dá)式膏潮，匹配css結(jié)尾的文件
test:/\.css$/i,
//使用style-loader css-loader锻狗，從右往左生效满力。css-loader獲取到css文件的內(nèi)容，style-loader將文件插入到html文件的<style></style>標(biāo)簽內(nèi)部轻纪。
use:['style-loader','css-loader']
}
]
}
};
6 如果直接執(zhí)行打包油额，肯定是要報(bào)錯(cuò)的，因?yàn)槲覀冞€沒(méi)有安裝css-loader和styl-loader刻帚，這個(gè)時(shí)候js文件是無(wú)法識(shí)別css文件中的內(nèi)容的潦嘶。執(zhí)行npm install css-loader style-loader -D(局部安裝相當(dāng)于--save-dev，-g全局安裝)崇众。
7 在index.html中引用打包對(duì)應(yīng)的js文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<!--這里引用的是打包好的文件-->
<script src="dist/index.bundle.js"></script>
</html>
8 執(zhí)行打包語(yǔ)句掂僵，生成dist目錄及index.bundle.js文件。在瀏覽器里面打開(kāi)index.html顷歌，可以在控制臺(tái)看到“haha”锰蓬，并且背景顏色改為index.css設(shè)置的黃色。
