Vue学习18-----webpack打包处理css文件

 1、新建css文件

li{
    list-style: none;
}

2、引入css样式、运行

 

import './css/ys.css'

3、运行后报错

4、执行

npm i style-loader css-loader

 5、配置webpack.config.js

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
//创建插件的实例对象
const htmlPlugin = new HtmlWebpackPlugin({
    //指定要用到的模板
    template:'./src/index.html',
    //指定生成的文件的名称，文件存在内存中，在目录中不显示
    filename:'index.html'
});

module.exports = {
    //编译模式
    mode:'development',//development production
    entry:path.join(__dirname,'./src/index.js'),
    output:{
        //输出文件的路径
         path:path.join(__dirname,'./dist'),
         //输出文件名
         filename:'bundle.js'
    },
    plugins:[htmlPlugin],
    module:{
        rules:[
            {test:/\.css$/,use:['style-loader','css-loader']}
        ]
    }

};

6、执行 npm run dev