webpack4.x踩坑记（二）
2018-12-25 本文已影响0人
愤的小鸟怒
使用import 引入css文件报错：
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()
]
};
运行npm run 报错：
ENOENT: no such file or directory, open 'D:\Program\webstorm\webpack_12.26\package.json'
原因是：没有切换到项目目录里面。
（一）loader安装与使用
1 使用语句：npm init -y 进行初始化，获取到package.json。
2 使用语句：npm install webpack webpack-cli -D 安装webpack和webpack-cli。
3 创建index.html,index.css,index.js文件。在index.css里面设置body的背景颜色为黄色。
02.png
4 在index.js里面书写一些内容，并import css文件。
import './index.css'
console.log("haha");
5 修改webpack.config.js文件的配置：
module.exports = {
//设置模式，开发模式不压缩
mode:'development',
entry:{
index:'./index.js'
},
output:{
filename:'[name].bundle.js',
path:__dirname + '/dist'
},
module:{
//在这里配置css文件
rules:[
{
//正则表达式，匹配css结尾的文件
test:/\.css$/i,
//使用style-loader css-loader，从右往左生效。css-loader获取到css文件的内容，style-loader将文件插入到html文件的<style></style>标签内部。
use:['style-loader','css-loader']
}
]
}
};
6 如果直接执行打包，肯定是要报错的，因为我们还没有安装css-loader和styl-loader，这个时候js文件是无法识别css文件中的内容的。执行npm install css-loader style-loader -D(局部安装相当于--save-dev，-g全局安装)。
7 在index.html中引用打包对应的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 执行打包语句，生成dist目录及index.bundle.js文件。在浏览器里面打开index.html，可以在控制台看到“haha”，并且背景颜色改为index.css设置的黄色。
