webpack4.x踩坑记（二）

使用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文件的标签内部。
                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文件：

8 执行打包语句，生成dist目录及index.bundle.js文件。在浏览器里面打开index.html，可以在控制台看到“haha”，并且背景颜色改为index.css设置的黄色。