Vue系列之 => webpack處理樣式文件

處理css文件

安裝

npm i style-loader css-loader -D     

main.js

import $ from 'jquery' //Es6中導入模塊的方式
import './css/index.css'
// import './css/index.css' webpack默認只能打包處理js類型文件
//若是須要處理非js類型的文件，咱們須要手動安裝一些合適的第三方loader加載器
// 一、打包處理css文件，須要安裝 npm i style-loade css-loader -D
// 二、打開webpack.config.js這個配置文件，在裏面新增一個配置節點，叫作module它是一個對象
//而後在module這個對象上有個rules屬性，這個rules屬性是個數組；這個數組中存放了全部第三方
//文件的匹配和處理規則


$(function(){
    $('li:odd').css('backgroundColor','red');
    $('li:even').css('backgroundColor',function(){
        return 'skyblue';
    });
})

webpack.config.js

const path = require('path');
//啓用熱更新的第二步,導入webpack
const webpack = require('webpack');
//導入在內存中生成html頁面的插件,只要是插件，都要放到plugins節點中去
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: path.join(__dirname, './src/main.js'),
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js'
    },
    devServer: { //這是配置webpack-dev-server命令參數的第二種形式
        open: true, //自動打開瀏覽器
        port: 3100, //設置端口
        contentBase: 'src', //指定託管的根目錄
        hot: true //啓用熱更新的第一步
    },
    plugins: [ //配置插件的節點
        //啓用熱更新第三步
        new webpack.HotModuleReplacementPlugin(), //new一個熱更新的模塊對象
        new htmlWebpackPlugin({ //建立一個在內存中生成html頁面的插件
            template : path.join(__dirname,'./src/index.html'), //指定模板頁面，根據指定的路徑生成內存中的頁面
            filename : 'index.html' //指定內存中生成的頁面的名稱
        })
    ],
    module : { //這個節點，用於配置全部第三方模塊加載器
        rules : [ //全部第三方模塊的匹配規則
            { test:/\.css$/,use:['style-loader','css-loader'] } //配置處理.css文件的第三方loader規則
　　　　　//注意：webpack處理第三方文件類型的過程：
　　　　　//1,發現這個要處理的文件不是js文件，就去配置文件中查找有沒有對應的第三方Loader規則
　　　　　//2，若是能找到對應的規則，就會調用對應的Loader處理這種文件類型
 　　　　 //3, 在調用loader的時候，是從後往前調用的
　　　　　//4，當最後的一個Loader調用完畢，會把處理的結果直接交給webpack進行打包合併，最終輸出到bundle.js中去。

        ]
    }
}

 處理less文件

npm i less -D 

npm i less-loader -D

main.js文件

import $ from 'jquery' //Es6中導入模塊的方式
import './css/index.css'
import './css/index.less'
// import './css/index.css' webpack默認只能打包處理js類型文件
//若是須要處理非js類型的文件，咱們須要手動安裝一些合適的第三方loader加載器
// 一、打包處理css文件，須要安裝 npm i style-loade css-loader -D
// 二、打開webpack.config.js這個配置文件，在裏面新增一個配置節點，叫作module它是一個對象
//而後在module這個對象上有個rules屬性，這個rules屬性是個數組；這個數組中存放了全部第三方
//文件的匹配和處理規則

$(function(){
    $('li:odd').css('backgroundColor','red');
    $('li:even').css('backgroundColor',function(){
        return 'skyblue';
    });
})

webpack.config.js文件

const path = require('path');
//啓用熱更新的第二步,導入webpack
const webpack = require('webpack');
//導入在內存中生成html頁面的插件,只要是插件，都要放到plugins節點中去
const htmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: path.join(__dirname, './src/main.js'),
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js'
    },
    devServer: { //這是配置webpack-dev-server命令參數的第二種形式
        open: true, //自動打開瀏覽器
        port: 3100, //設置端口
        contentBase: 'src', //指定託管的根目錄
        hot: true //啓用熱更新的第一步
    },
    plugins: [ //配置插件的節點
        //啓用熱更新第三步
        new webpack.HotModuleReplacementPlugin(), //new一個熱更新的模塊對象
        new htmlWebpackPlugin({ //建立一個在內存中生成html頁面的插件
            template: path.join(__dirname, './src/index.html'), //指定模板頁面，根據指定的路徑生成內存中的頁面
            filename: 'index.html' //指定內存中生成的頁面的名稱
        })
    ],
    module: { //這個節點，用於配置全部第三方模塊加載器
        rules: [ //全部第三方模塊的匹配規則
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }, //配置處理.css文件的第三方loader規則
            {
                test: /\.less$/,
                //配置處理.less文件的第三方文件規則
                use: ['style-loader','css-loader','less-loader']
            }
        ]
    }
}

 處理scss文件

安裝  npm i sass-loader -D   && npm i node-sass -D (在安node-sass要使用cnpm，npm安裝極容易失敗)

 其餘配置按照css和less操做便可。