處理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載入器
// 1、打包處理css檔案，需要安裝 npm i style-loade css-loader -D
// 2、開啟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載入器
// 1、打包處理css檔案，需要安裝 npm i style-loade css-loader -D
// 2、開啟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操作即可。