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